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

Ответ 1

$(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:<");
    }
});

Ответ 2

попробуйте следующее:

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

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

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

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

Ответ 3

Я пробовал предыдущий ответ и, похоже, не работал с $( "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:<"); 
} 

Ответ 4

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

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

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

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

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

Ответ 5

Это работает для меня:

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().

Ответ 6

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

Ответ 7

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

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

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

Ответ 8

Я нашел решение Ванилы

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

Ответ 9

    <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.

Поместите это в тег script после закрытия тега body.

Ответ 10

Я написал обновленную версию ответа Kees C. Bakker:

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

Ответ 11

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

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

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

Ответ 12

я использую

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

Ответ 13

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

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

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

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