Почему scrollTop, pageYOffset и высота не работают?

Я пытаюсь определить, есть ли вертикальная полоса прокрутки или нет в окне браузера (если содержимое превышает высоту окна и переполнение). Я пробовал document.body.scrollTop, window.pageYOffset, и document.body.style.height ... из них работают!

Выполнение теста window.alert для переменных, инициализированных этими свойствами, pageYOffset всегда возвращает независимо от того, есть ли полоса прокрутки или нет, а две другие возвращают то, что кажется пустой String.

Моя единственная идея состоит в том, что, возможно, конфликты позиционирования CSS приводят к этому, но, похоже, таких конфликтов нет ... Любые идеи, решения, обходные пути?Почему scrollTop, pageYOffset и высота не работают?

источник

2012-04-11 Ian Campbell

Этот

window.innerWidth - document.documentElement.clientWidth

возвращает ширину вертикальной полосы прокрутки браузера-окна, и 0, если нет прокрутки-бар.

Таким образом, вы могли бы иметь функцию ...

function windowHasVerticalScrollbar() { 
    return window.innerWidth - document.documentElement.clientWidth > 0; 
}

К сожалению, IE8 и IE7 не поддерживает значение window.innerWidth, поэтому этот метод не будет работать в этих браузерах. (Тем не менее, он работает в IE9 и во всех других браузерах).

Кроме того, поскольку documentElement является элементом <html> (корневым элементом веб-страницы), если вы устанавливаете стили для этого элемента (например, поля, абсолютное позиционирование и т. Д.), Расчет может возвращать неверные результаты.

источник

2012-04-11 23:07:49

Это потрясающе! Большое вам спасибо за ваши усилия. Это, кажется, серьезная проблема, когда многие люди предлагают использовать любой из вышеупомянутых подходов, которые не работали ... но этот подход работает отлично. Мой единственный вопрос теперь в том, что именно представляет собой 'innerWidth' и' offsetWidth' соответственно? –

@Ian Читать в MDN: ['clientWidth'] (https://developer.mozilla.org/en/DOM/element.clientWidth), [' innerWidth'] (https://developer.mozilla.org/en/ DOM/window.innerWidth). Примечание: теперь я использую 'clientWidth' (вместо' offsetWidth') - теперь он работает и в IE9 –

K. Спасибо за вашу помощь @Sime. –

Почему scrollTop, pageYOffset и высота не работают?

ответ

Смежные вопросы