检测页面是否具有垂直滚动条？

我只希望一些简单的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;

但是，这只会告诉您垂直的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");

我尝试了前面的答案，但似乎无法使用$（“ 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。它们只是临时显示为覆盖图，不会占用文档中的空间。从长远来看，缩放手机也成为一个问题。
• 当人们明确将htmland body元素的溢出都设置为非默认值时，检测可能会被取消（随后会发生什么事，请稍作干预-请参阅此说明）），。
• 在大多数答案中，未检测到正文填充，边框或边距，并使结果失真。

我花了比我想像的更多的时间来寻找一个“行之有效”的解决方案（咳嗽）。我想出的算法现在是jQuery.isInView插件的一部分，该插件公开了.hasScrollbarmethod。如果需要，请查看源。

在您完全控制页面并且不必处理未知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)

为什么？假设您有一个页面，其中内容比窗口高度高，并且用户可以向上/向下滚动。如果您在Mac上使用Chrome且未插入鼠标，则用户将不会看到滚动条。插入鼠标，将出现一个滚动条。（请注意，此行为可以被覆盖，但这是默认的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警报。

将其放在结束标签后的script标签中。

我写了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)
}

我用

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";
}

但仅当滚动条通过更改道具消失而消失时，它才起作用；如果内容等于或小于窗口，则它将不起作用。