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

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

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를 얻을 수도 있습니다.