Как определить, есть ли полосы прокрутки в окне браузера?

Question

Мне нужно определить, есть ли полосы прокрутки (как вертикальные, так и горизонтальные) в окне браузера. Я использовал этот код, но он не работает надежно в 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, которые (из-за характера их вращения) могут временно выходить за границы текущего размера документа (таким образом, сделать документ временно больше). Если изначально не было полос прокрутки, переход CSS3 может привести к тому, что полосы прокрутки появятся во время перехода, а затем исчезнут, когда переход завершится, что приведет к появлению ужасной вспышки полосы прокрутки. Если я знаю, что полос прокрутки нет, я могу временно добавить класс, который установит overflow-x или overflow-y в состояние hidden и, таким образом, предотвратит мигание полосы прокрутки во время перехода CSS3. Если полосы прокрутки уже есть, мне не нужно ничего делать, потому что они могут немного двигаться, но они не будут включаться / выключаться во время перехода.

Бонусные баллы, если на самом деле можно сказать не только о том, нужны ли вообще полосы прокрутки, но и о том, есть ли они на самом деле или нет.

Answer 1

После столкновения с проблемами мерцания с прокручиваемой версией, предложенной Дэвидом в некоторых браузерах (Safari и IE), я остановился на этом коде, у которого нет проблемы мерцания:

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);
}

Этопроизводная от того, что я использовал, и на общую технику ссылались в посте, опубликованном фан-фаворитом.Кажется, он работает в любом браузере, который я пробовал, даже в IE6.Для моих целей я хотел, чтобы при любом сбое возвращалось наличие полосы прокрутки, поэтому я так закодировал условие сбоя.

Примечание: этот код не определяет, была ли полоса прокрутки включена или выключена с помощью CSS,Этот код определяет, требуется ли автоматическая полоса прокрутки или нет.Если на вашей странице могут быть настройки CSS, которые управляют полосой прокрутки, тогда вы можете получить CSS и сначала проверить это.

Answer 2

Вы смотрели на этот другой пост? Как я могу обнаружить присутствие полосы прокрутки (используя Javascript) в HTML iFrame?

Answer 3

Это на самом деле довольно легко. Это будет работать в любом современном браузере:

// try scrolling by 1 both vertically and horizontally
window.scrollTo(1,1);

// did we move vertically?
if (window.pageYOffset != 0) {
 console.log("houston, we have vertical scrollbars");
}

// did we move horizontally?
if (window.pageXOffset != 0) {
 console.log("houston, we have horizontal scrollbars");
}

// reset window to default scroll state
window.scrollTo(0,0);