> 웹 프론트엔드 > JS 튜토리얼 > scrollLeft, scrollTop 브라우저 호환성 test_javascript 기술 정보

scrollLeft, scrollTop 브라우저 호환성 test_javascript 기술 정보

WBOY
풀어 주다: 2016-05-16 17:40:03
원래의
1397명이 탐색했습니다.

오늘 원래 그룹 팝업창을 수정하다가 구글 크롬의 팝업창 위치가 다른 브라우저의 팝업창 위치와 다른 것을 발견했습니다. .소스코드를 보면

document.documentElement.scrollTop을 직접 사용하는 것으로 나타났는데, 크롬에서는 이 값이 0이다.

문서가 있을 때 첫 번째 줄에 dtd 선언이 있습니다. 표준 브라우저는 document.documentElement.scrollTop을 인식하지만, 문서 선언이 없으면 chrome과 safari는 여전히 scrollTop 값을 읽을 수 있습니다. chrome은 document.body .scrollTop을 전달하여 값을 얻습니다.

이 문제를 해결하세요. 브라우저 카테고리를 결정하기 위해 많은 어려움을 겪을 필요가 없습니다. 왜냐하면 다른 상황에서는 document.body와 document.documentElement가 있기 때문입니다. 다른 값을 얻을 수 있습니다.
브라우저 또는 특정 div의 scrollTop 또는 scrollLeft를 가져올 때 다음 메소드를 캡슐화했습니다.

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

var ueScroll=(function(){
//Get scrollX
function scrollX(ele){
var element=ele || document .body;
return element.scrollLeft || (document.documentElement && document.documentElement.scrollLeft)
//Get scrollY
function scrollY(ele ){
var element= ele || document.body;
return element.scrollTop || (document.documentElement && document.documentElement.scrollTop)
}
return {
왼쪽: scrollX,
top:scrollY
}
})()

DEMO에서 각 브라우저는 매우 편리하고 간단한 방법으로 scrollTop 및 scrollLeft 값을 얻습니다. .

나중에 dom 개체가 전달되는 한 textarea 또는 div에서 직접 사용하여 scrollTop 및 scrollLeft를 얻을 수도 있습니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿