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

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

бонусные баллы, если на самом деле можно сказать не только, если полосы прокрутки обычно требуются, но и есть ли они на самом деле или нет.

6
javascript scrollbar scrollbars

3 ответов

после запуска проблем с мерцанием с версией прокрутки, предложенной Дэвидом в некоторых браузерах (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);
}

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

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

5
2

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

// 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);
1