주요 브라우저_javascript 기술과 완벽하게 호환되는 JS의 스크롤탑 방식

1. 브라우저별 스크롤탑 차이점

IE6/7/8/9/10:

doctype 선언이 없는 페이지의 경우 document.body.scrollTop을 사용하여 scrollTop 높이를 가져올 수 있습니다.
doctype 선언이 있는 페이지의 경우 document.documentElement.scrollTop을 사용할 수 있습니다.

사파리:

Safari는 매우 특별합니다. scrollTop을 가져오는 자체 기능이 있습니다: window.pageYOffset

Firefox:

Firefox 및 기타 상대적으로 표준적인 브라우저는 document.documentElement.scrollTop을 사용하면 훨씬 쉽습니다.

2.scrollTop 값을 가져옵니다

scrollTop 할당 문구를 완벽하게 획득:

코드 복사 코드는 다음과 같습니다.

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

이 과제를 통해 어떤 상황에서도 scrollTop 값을 얻을 수 있습니다.

이 과제를 주의 깊게 살펴보세요. 눈에 띄는 점이 있나요? ?

맞습니다. || 중간에 window.pageYOffset(Safari)이 배치되어 있습니다.

숫자 0이 undefine과 OR로 연결되면 시스템은 기본적으로 마지막 값을 반환하기 때문입니다. 즉, OR 연산에서 0 == 정의를 해제합니다.

페이지 스크롤 막대가 바로 위에 있을 때, 즉 scrollTop 값이 0일 때 IE의 window.pageYOffset(Safari)은 이때 window.pageYOffset(Safari)이 에 배치되면 undefine으로 돌아갑니다. OR 작업이 끝나면 scrollTop은 undefine을 반환하고, 다음 작업에서 undefine을 사용하면 오류가 보고됩니다.

다른 브라우저에서는 scrollTop 할당이나 작업 순서에 관계없이 undefine을 반환하지 않으므로 안전하게 사용할 수 있습니다..

결국 여전히 IE의 문제군요...

조금 혼란스러워서 명확하게 표현할 수 있을지 모르겠습니다.

하지만 결국 이 문장은 테스트를 거쳤고 괜찮으니 안심하고 사용하셔도 된다는 결론을 내렸습니다.

코드 복사 코드는 다음과 같습니다.

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

이것은 scrollTop을 얻기 위한 완벽한 할당문입니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.