얼마나 많은 사용자가 스크롤했는지 감지하여 검색

Question

페이지에서 더 작은 버전을 클릭하면 전체 해상도의 사진을 보여주기 위해 내 웹 사이트에 이미지 팝업 기능이 있습니다.

이 그것을 배치 현재 CSS입니다 :

div#enlargedImgWrapper { 
    position: absolute; 
    top: 30px; 
    left: 55px; 
    z-index: 999; 
} 

내가 페이지 아래로 더 이미지를 클릭하면 문제는 지금 윈도우는 여전히 페이지의 왼쪽 상단에 표시된다 내가 다시 스크롤 할 때까지 나는 그것을 볼 수 없다. 문서와 관련된 현재 위치가 무엇이든 상관없이 창에 상대적으로 나타나야합니다.

참고 : 일부 이미지는 화면보다 클 수 있으므로 사용자가 이미지를 따라 스크롤 할 수 있기를 바랍니다.

내 생각은 top 값을 변경 JS를 사용하는 것이었다 :

나는 사용자가 페이지 ( var scrollValue)를 아래로 스크롤 얼마나 많은에 의해 감지 할 수있는 방법

var scrollValue = ???; 
document.getElementById('enlargedImgWrapper').style.top = scrollValue+30 + 'px'; 

?
또는이를 수행하는 '더 좋은'방법이 있습니까?

편집 : 가능하면 jQuery없이이 작업을 수행하고 싶습니다.

Answer 1

순수 자바 스크립트는 scrollTop 및 scrollLeft 사용

var scrollLeft = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft; 
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; 

https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop

jQuery 버전 :

var scrollLeft = $(window).scrollLeft() ; 
var scrollTop = $(window).scrollTop() ; 

필요한 것은 다음과 같습니다.

Answer 2

document.getElementById('enlargedImgWrapper').scrollTop; 

MSDN

이 속성의 값은 스크롤 범위 내 콘텐츠 오프셋 현 수직 같다. 이 속성을 모든 값으로 설정할 수 있지만 0보다 작은 값을 할당하면 속성은 0으로 설정됩니다. 최대 값보다 큰 값을 할당하면 속성이 최대 값으로 설정됩니다.

이 속성은 인라인으로 설정할 수 있지만 문서를로드하는 동안 일치하지 않는 결과가 일 수 있습니다.

scrollTop property