Виявити, чи на сторінці є вертикальна смуга прокрутки?

Я просто хочу, щоб простий JQ / JS перевірив, чи поточна сторінка / вікно (не конкретний елемент) має вертикальну смугу прокрутки.

Гуглінг дає мені речі, які здаються надмірно складними саме для цієї основної функції.

Як це можна зробити?

$(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;

Це покаже лише вам, якщо вертикальна прокруткаВисота більша за висоту вмісту, який видно. 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"). Висота () не обов'язково представляє всю висоту 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.

Помістіть це в тег сценарію після закриття тегу body.

Я написав оновлену версію відповіді Кіса К. Бейкера:

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 overflow

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

але він працюватиме лише у випадку, якщо на панелі прокрутки зникне, змінивши опору, вона не працюватиме, якщо вміст дорівнює або менший, ніж вікно.