javascript_javascript 스킬의 scrollTop에 대한 자세한 설명

scrollTop은 스크롤의 높이를 나타냅니다. 기본적으로 스크롤은 위치:0;에서 시작됩니다. scrollTop의 오프셋(오프셋)은 위쪽으로부터의 오프셋을 픽셀 단위로 나타냅니다.

scrollTop()의 스크롤 높이는 스크롤 값을 '설정'하고 스크롤 값을 '가져올' 수 있습니다.
스크롤 값이 설정되면 이 메서드는 일치하는 모든 요소에 대한 스크롤 값을 설정합니다.
스크롤 값을 가져올 때 이 메서드는 일치하는 첫 번째 요소의 스크롤 위치만 반환합니다.
scrollTop의 값을 얻으려면 다음 코드를 참조할 수 있습니다.

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

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

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

IE6/7/8:
doctype 선언이 없는 페이지의 경우 document.body.scrollTop을 사용하여 scrollTop 높이를 가져올 수 있습니다.
doctype 선언이 있는 페이지의 경우 document.documentElement.scrollTop을 사용할 수 있습니다.
사파리:
Safari는 특별합니다. scrollTop을 가져오는 자체 기능이 있습니다.
파이어폭스:
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)이 undefine을 반환하는데, 이때 OR 연산의 마지막에 window.pageYOffset(Safari)이 배치되면 다음 연산에서 undefine을 사용하면 오류가 발생합니다. 보고되었습니다.
다른 브라우저에서는 scrollTop 할당이나 작업 순서에 관계없이 undefine을 반환하지 않으므로 안전하게 사용할 수 있습니다..
결국은 여전히 ​​IE의 문제군요...
좀 헷갈려서 명확하게 표현할 수 있을지 모르겠네요.
하지만 결국 이 문장은 테스트를 거쳤고 괜찮으니 안심하고 사용하셔도 된다는 결론을 내렸습니다.

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

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

DTD 관련 지침:

페이지에 DTD가 있거나 DOCTYPE이 지정된 경우 document.documentElement를 사용하세요.

페이지에 DTD가 없거나 DOCTYPE이 지정되지 않은 경우 document.body가 사용됩니다.

이는 IE와 Firefox 모두에 해당됩니다.

호환성을 위해 DTD 유무에 관계없이 다음 코드를 사용할 수 있습니다.

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

var scrollTop = window.pageYOffset //FF용
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;

DocumentElement 및 본문 관련 지침:

body는 DOM 객체의 body 하위 노드입니다. 즉,

documentElement는 전체 노드 트리의 루트 노드 루트이며,

태그입니다.

DOM은 계층 구조의 각 객체를 노드라고 부르는데, 이는 우리의 디렉토리와 마찬가지로 루트 디렉토리이며, 루트 디렉토리 아래에도 하위 디렉토리가 있습니다. 디렉토리 아래에 있습니다.

HTML 하이퍼텍스트 마크업 언어를 예로 들어 보겠습니다. 전체 문서의 루트 중 하나는 DOM에서 document.documentElement를 사용하여 액세스할 수 있습니다. 이는 전체 노드 트리의 루트 노드입니다. body는 하위 노드입니다. body 태그에 액세스하려면 스크립트에 document.body를 작성해야 합니다.

버튼을 클릭하여 페이지 상단으로 스크롤하려면 jquery를 사용하여 $(document).scrollTop(0) 코드를 클릭하고 실행하여 상단으로 스크롤하세요.

동일한 스크롤 위치 scrollLeft는 왼쪽으로 스크롤하는 위치를 나타냅니다.

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