javascript - 브라우저 창에 스크롤바가 있는지 어떻게 감지합니까?

저는 브라우저 창에 스크롤바(수직 및 수평)가 있는지 감지할 수 있어야 합니다. 이 코드를 사용해 왔지만 Firefox 5에서는 신뢰할 수 있게 작동하지 않습니다.

JFL.GetScrollbarState = function () {
    var myWidth = 0;
    var myHeight = 0;
    if (document.documentElement && document.documentElement.clientWidth) {
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } else {
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    return ({
        vScrollbar: document.body.scrollHeight > myHeight,
        hScrollbar: document.body.scrollWidth > myWidth
    });
}

이것을 크로스 브라우저에서도 작동하게 할 수 있는 더 나은 방법이 있을까요? 제 브라우저 대상은 Firefox 4-5, Chrome, Safari 4+, Opera 10+입니다.

만약 제가 스크롤바가 있는지 알아야 하는 이유에 관심이 있다면, 그것은 제가 몇 가지 회전하는 CSS3 전환 효과를 가지고 있기 때문입니다. 이 전환 효과들은 회전 특성상 현재 문서 크기를 일시적으로 넘어설 수 있어(따라서 문서를 일시적으로 더 크게 만들 수 있음) 스크롤바가 없으면 전환 중에 스크롤바가 나타났다 사라질 수 있어 보기 싫은 깜박임이 생길 수 있습니다. 스크롤바가 없는 것을 알고 있다면, 전환 중 스크롤바 깜박임을 막기 위해 overflow-x나 overflow-y를 hidden으로 설정하는 클래스를 일시적으로 추가할 수 있습니다. 이미 스크롤바가 있으면 굳이 아무것도 할 필요가 없습니다. 조금 움직일 수는 있지만, 전환 중에 나타났다 사라지진 않기 때문입니다.

스크롤바가 일반적으로 필요한지 여부뿐만 아니라 실제로 존재하는지도 판별할 수 있다면 추가 점수가 주어진다.

답변 #1

일부 브라우저(Safari와 IE)에서 David가 제안한 스크롤 버전에서 깜박임 문제가 발생한 후, 나는 깜박임 문제가 없는 이 코드로 결정했습니다:

function getScrollBarState() {
    var result = {vScrollbar: true, hScrollbar: true};
    try {
        var root = document.compatMode=='BackCompat'? document.body : document.documentElement;
        result.vScrollbar = root.scrollHeight > root.clientHeight;
        result.hScrollbar = root.scrollWidth > root.clientWidth;
    } catch(e) {}
    return(result);
}

제가 사용하던 것의 파생물이며 일반적인 기술은 fanfavorite이 게시한 글에서 참조되었습니다. 제가 시도한 모든 브라우저, 심지어 IE6에서도 작동하는 것 같습니다. 제 목적상, 실패가 발생하면 스크롤바가 있다는 것을 반환하도록 하고 싶어서 실패 조건을 그렇게 코딩했습니다.

참고: 이 코드는 CSS로 스크롤바가 강제로 켜지거나 꺼졌는지를 감지하지 않습니다. 이 코드는 자동 스크롤바가 필요한지를 감지합니다. 페이지에 스크롤바를 제어하는 CSS 설정이 있을 수 있다면, 먼저 CSS를 가져와서 확인할 수 있습니다.

답변 #2

이 다른 게시물을 확인해 보셨나요? HTML iFrame에서 스크롤바 존재를 (자바스크립트를 사용하여) 어떻게 감지할 수 있나요?