Определить, есть ли на странице вертикальная полоса прокрутки?

Мне просто нужен простой JQ / JS, чтобы проверить, есть ли у текущей страницы / окна (а не конкретного элемента) вертикальную полосу прокрутки.

Поиск в Google дает мне вещи, которые кажутся слишком сложными только для этой базовой функции.

Как это может быть сделано?

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        alert("Vertical Scrollbar! D:");
    }

    // Check if body width is higher than window width :)
    if ($("body").width() > $(window).width()) {
        alert("Horizontal Scrollbar! D:<");
    }
});

попробуй это:

var hasVScroll = document.body.scrollHeight > document.body.clientHeight;

Это только скажет вам, если вертикальный scrollHeight больше, чем высота просматриваемого контента. hasVScrollПеременная будет содержать истинное или ложное.

Если вам нужно выполнить более тщательную проверку, добавьте в приведенный выше код следующее:

// Get the computed style of the body element
var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");

// Check the overflow and overflowY properties for "auto" and "visible" values
hasVScroll = cStyle.overflow == "visible" 
             || cStyle.overflowY == "visible"
             || (hasVScroll && cStyle.overflow == "auto")
             || (hasVScroll && cStyle.overflowY == "auto");

Я попробовал предыдущий ответ и, похоже, не работает с $ ("body"). Height () не обязательно представляет всю высоту html.

Я исправил решение следующим образом:

// Check if body height is higher than window height :) 
if ($(document).height() > $(window).height()) { 
    alert("Vertical Scrollbar! D:"); 
} 

// Check if body width is higher than window width :) 
if ($(document).width() > $(window).width()) { 
    alert("Horizontal Scrollbar! D:<"); 
} 

Давайте вернем этот вопрос из мертвых;) Есть причина, по которой Google не дает вам простого решения. Особые случаи и особенности браузера влияют на расчет, и это не так тривиально, как кажется.

К сожалению, пока есть проблемы с решениями, изложенными здесь. Я вовсе не хочу их принижать - они являются отличной отправной точкой и затрагивают все ключевые свойства, необходимые для более надежного подхода. Но я бы не рекомендовал копировать и вставлять код из любого другого ответа, потому что

• они не улавливают эффект позиционирования контента надежным кроссбраузерным способом. В ответах, основанных на размере тела, это полностью отсутствует (тело не является родительским элементом смещения для такого содержимого, если оно не позиционируется само). И эти ответы проверяют $( document ).width()и .height()становятся жертвой ошибочного определения размера документа jQuery .
• Если полагаться на него window.innerWidth, если браузер поддерживает это, ваш код не сможет обнаруживать полосы прокрутки в мобильных браузерах, где ширина полосы прокрутки обычно равна 0. Они просто временно отображаются как наложение и не занимают места в документе. , Масштабирование на мобильных устройствах также становится проблемой (долгая история).
• Обнаружение можно скинуться , когда люди явно установить переполнение как htmlи bodyэлемент значений не по умолчанию (то , что происходит потом немного Приглашена - см это описание ).
• В большинстве ответов внутренние отступы, границы или поля не обнаруживаются и искажают результаты.

Я потратил больше времени, чем мог бы себе представить, на поиск решения, которое «просто работает» (кашель). Алгоритм я придумал теперь является частью плагина, jQuery.isInView , который выставляет на .hasScrollbarметод . Если хотите, посмотрите исходник .

В сценарии, когда вы полностью контролируете страницу и не имеете дело с неизвестным 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;
    }
}

Для тела просто используйте hasVerticalScroll().

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

Как ни странно, ни одно из этих решений не сообщает вам, есть ли на странице вертикальная полоса прокрутки.

window.innerWidth - document.body.clientWidthдаст вам ширину полосы прокрутки. Это должно работать в любом IE9 + (не тестировалось в меньших браузерах). (Или, чтобы строго ответить на вопрос,!!(window.innerWidth - document.body.clientWidth)

Зачем? Допустим, у вас есть страница, содержимое которой выше, чем высота окна, и пользователь может прокручивать вверх / вниз. Если вы используете Chrome на Mac без подключенной мыши, пользователь не увидит полосу прокрутки. Подключите мышь, и появится полоса прокрутки. (Обратите внимание, что это поведение можно переопределить, но это AFAIK по умолчанию).

Я нашел ванильный раствор

var hasScrollbar = function() {
  // The Modern solution
  if (typeof window.innerWidth === 'number')
    return window.innerWidth > document.documentElement.clientWidth

  // rootElem for quirksmode
  var rootElem = document.documentElement || document.body

  // Check overflow style property on body for fauxscrollbars
  var overflowStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowStyle = rootElem.currentStyle.overflow

  overflowStyle = overflowStyle || window.getComputedStyle(rootElem, '').overflow

    // Also need to check the Y axis overflow
  var overflowYStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowYStyle = rootElem.currentStyle.overflowY

  overflowYStyle = overflowYStyle || window.getComputedStyle(rootElem, '').overflowY

  var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight
  var overflowShown    = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle)
  var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll'

  return (contentOverflows && overflowShown) || (alwaysShowScroll)
}

    <script>
    var scrollHeight = document.body.scrollHeight;
    var clientHeight = document.documentElement.clientHeight;
    var hasVerticalScrollbar = scrollHeight > clientHeight;

    alert(scrollHeight + " and " + clientHeight); //for checking / debugging.
    alert("hasVerticalScrollbar is " + hasVerticalScrollbar + "."); //for checking / debugging.
    </script>

Он скажет вам, есть ли у вас полоса прокрутки или нет. Я включил некоторую информацию, которая может помочь в отладке, которая будет отображаться как предупреждение JavaScript.

Поместите это в тег скрипта после закрывающего тега тела.

Я написал обновленную версию ответа Киса К. Баккера:

const hasVerticalScroll = (node) => {
  if (!node) {
    if (window.innerHeight) {
      return document.body.offsetHeight > window.innerHeight
    }
    return (document.documentElement.scrollHeight > document.documentElement.offsetHeight)
      || (document.body.scrollHeight > document.body.offsetHeight)
  }
  return node.scrollHeight > node.offsetHeight
}

if (hasVerticalScroll(document.querySelector('body'))) {
  this.props.handleDisableDownScrollerButton()
}

Функция возвращает true или false в зависимости от того, есть ли на странице вертикальная полоса прокрутки или нет.

Например:

const hasVScroll = hasVerticalScroll(document.querySelector('body'))

if (hasVScroll) {
  console.log('HAS SCROLL', hasVScroll)
}

я использую

public windowHasScroll()
{
    return document.body.clientHeight > document.documentElement.clientHeight;
}

Просто сравните ширину корневого элемента документа (т.е. элемента html) с внутренней частью окна:

if ((window.innerWidth - document.documentElement.clientWidth) >0) console.log('V-scrollbar active')

Если вам также нужно знать ширину полосы прокрутки:

vScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

Другие решения не работали в одном из моих проектов, и я закончил проверку свойства переполнения css

function haveScrollbar() {
    var style = window.getComputedStyle(document.body);
    return style["overflow-y"] != "hidden";
}

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