[javascript] 페이지에 세로 스크롤바가 있는지 감지 하시겠습니까?

이 질문을 죽음에서 되돌려 보겠습니다.;) Google이 간단한 해결책을 제공하지 않는 데에는 이유가 있습니다. 특수한 경우와 브라우저의 단점이 계산에 영향을 미치며 보이는 것만 큼 사소하지 않습니다.

불행히도 지금까지 여기에 설명 된 솔루션에 문제가 있습니다. 나는 그것들을 전혀 폄하하려는 것이 아닙니다. 그들은 훌륭한 출발점이며보다 강력한 접근 방식에 필요한 모든 주요 속성을 다루고 있습니다. 그러나 다른 답변에서 코드를 복사하여 붙여 넣는 것은 권장하지 않습니다.

• 신뢰할 수있는 크로스 브라우저 방식으로 배치 된 콘텐츠의 효과를 포착하지 못합니다. 본문 크기를 기반으로 한 답변은이를 완전히 놓칩니다 (본문은 자체 위치가 지정되지 않는 한 이러한 콘텐츠의 오프셋 부모가 아닙니다). 그리고 그 대답은 확인 $( document ).width()하고 .height()희생양 문서 크기의 jQuery의 버그가 감지 .
• window.innerWidth브라우저에서 지원하는 경우을 사용하면 코드가 모바일 브라우저에서 스크롤 막대를 감지하지 못합니다. 여기서 스크롤 막대의 너비는 일반적으로 0입니다. 일시적으로 오버레이로 표시되며 문서에서 공간을 차지하지 않습니다. . 모바일에서 확대하는 것도 문제가됩니다 (긴 이야기).
• 사람들이 html및 body요소 의 오버플 로를 기본값이 아닌 값 으로 명시 적으로 설정하면 탐지가 중단 될 수 있습니다 (그러면 발생하는 일이 약간 관련됩니다- 이 설명 참조 ).
• 대부분의 답변에서 본문 패딩, 테두리 또는 여백이 감지되지 않고 결과가 왜곡됩니다.

나는 “그냥 효과가있는”(기침) 해결책을 찾는 데 내가 생각했던 것보다 더 많은 시간을 보냈다. 내가 생각 해낸 알고리즘은 이제 메소드 를 노출 하는 .hasScrollbarjQuery.isInView 플러그인의 일부입니다 . 원하는 경우 소스를 살펴보십시오 .

페이지를 완전히 제어하고 알려지지 않은 CSS를 다룰 필요가없는 시나리오에서는 플러그인을 사용하는 것이 과도 할 수 있습니다. 결국 어떤 경우가 적용되는지, 그렇지 않은지 알 수 있습니다. 그러나 알려지지 않은 환경에서 신뢰할 수있는 결과가 필요한 경우 여기에 설명 된 솔루션으로는 충분하지 않을 것입니다. 잘 테스트 된 플러그인을 사용하는 것이 좋습니다.

답변

function hasVerticalScroll(node){
    if(node == undefined){
        if(window.innerHeight){
            return document.body.offsetHeight> window.innerHeight;
        }
        else {
            return  document.documentElement.scrollHeight >
                document.documentElement.offsetHeight ||
                document.body.scrollHeight>document.body.offsetHeight;
        }
    }
    else {
        return node.scrollHeight> node.offsetHeight;
    }
}

var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;