$ (window) .scrollTop () vs. $ (document) .scrollTop ()


답변:


149

그들 모두 같은 효과를 낼 것 입니다.

의견에서 지적 그러나 : $(window).scrollTop()더 많은 웹 브라우저에서 지원되는 것보다 $('html').scrollTop().


3
IE8에서 0을 반환합니다 (내 페이지가 쿼크 모드에 있지만 요소를 재생할 수 있음)
Greg Ogle

38
$ ( 'html'). scrollTop ()은 크로스 브라우저가 아닙니다 (세터로서 적어도 Chrome에서는 작동하지 않습니다). 현재 가장 크로스 브라우저 방식은 $ (window) .scrollTop ()을 getter로, $ ( 'html, body'). scrollTop (offset)을 setter로 사용하는 것입니다.
Georgii Ivankin

6
이 참조 에 따르면 인수 scrollTop가 없으면 아무 곳이나 스크롤하지 않고 현재 스크롤 위치 만 반환합니다.
OR Mapper

3
@ d2burke scrollTop()는 게터이며 scrollTop(value)세터입니다. scrollTop()인수가 없으면 스크롤 위치가 변경되지 않습니다.

1
@ M98 window.scrollTo (x, y)
Bodman

36

첫째, 당신은 차이를 이해하는 것이 필요 window하고 document. window객체는 최상위 클라이언트 측 개체입니다. window개체 위에는 아무것도 없습니다 . JavaScript는 객체 지향 언어입니다. 객체로 시작하여 객체의 속성 또는 객체 그룹의 속성에 메소드를 적용합니다. 예를 들어, document객체는 객체의 window객체입니다. document의 배경색 을 변경하려면 documentbgcolor속성을 설정하십시오 .

window.document.bgcolor = "red" 

귀하의 질문에 대답하기 위해, 사이의 최종 결과에는 차이가 없다 window하고 document scrollTop. 둘 다 동일한 출력을 제공합니다.

http://jsfiddle.net/7VRvj/6/ 에서 실제 예제를 확인하십시오.

일반적인 사용에서 document주로 이벤트를 등록하고 사용하는 window등의 일을 scroll, scrollTop하고 resize.


최종 결과에는 차이가 없습니다. 둘 다 동일한 출력을 제공합니다.
후세인

창 개체가 넘치지 않을 수 있으므로 일부 브라우저는 창 스크롤을 지원하지 않습니다.
Bodman

11
윈도우를 지원하지 않는 브라우저는 구체적입니다. 다음은 jsfiddle.net/7VRvj/4 의 예 입니다 . 모든 브라우저에서 확인하고 작동하지 않는 브라우저를 알려주십시오.
후세인


0

방금 scrollTop여기 에 설명 된 것과 비슷한 문제가 있습니다.

결국 나는 선택기를 사용하여 FirefoxIE 에서이 문제를 해결했습니다.$('*').scrollTop(0);

효과를 원하지 않지만 문서, 본문, HTML 및 창 불일치 문제를 해결하는 요소가 있으면 완벽하지 않습니다. 도움이된다면 ...


20
이런 식으로 *를 사용해서는 안됩니다 (사실 * 완전히 피하십시오). 하나의 요소를 타겟팅하는 대신 전체 DOM에 영향을 미칩니다. 엄청난 성능 저하. 선택기는 가능한 한 정확해야합니다.
Vlad

2
나는 개인적으로 항상 사용해 왔으며 $("html,body").scrollTop(val)아무런 문제가 없었습니다
Roi
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.