Question

我只想要一些简单的JQ / JS来检查当前页面/窗口（不是特定元素）是否有垂直滚动条。

谷歌搜索给了我这些基本功能似乎过于复杂的东西。

如何做到这一点？

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

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

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

Answer 4

让我们从死里复活这个问题;）谷歌没有给你一个简单的解决方案是有原因的。特殊情况和浏览器怪癖会影响计算，并不像看起来那么简单。

不幸的是，到目前为止，此处列出的解决方案存在问题。我根本不打算贬低它们 - 它们是很好的起点，可以触及更强大的方法所需的所有关键属性。但我不建议从其他任何答案中复制和粘贴代码，因为

他们不会以可靠的跨浏览器方式捕获定位内容的效果。基于身体大小的答案完全错过了（身体不是这种内容的偏移父母，除非它自己定位）。检查$( document ).width()和.height()的答案会成为jQuery's buggy detection of document size的牺牲品。
依赖于window.innerWidth，如果浏览器支持它，则会使您的代码无法检测移动浏览器中的滚动条，其中滚动条的宽度通常为0.它们只是暂时显示为叠加层并且＃39;占用文档中的空间。放大手机也成了一个问题（长篇故事）。
当人们明确地将html和body元素的溢出设置为非默认值时，可以抛弃检测（当时发生的事情有点涉及 - 请参阅this description ）。
在大多数答案中，未检测到身体填充，边框或边距并扭曲结果。

我花了更多的时间来寻找一个能够解决问题的解决方案。（咳嗽）。我提出的算法现在是插件jQuery.isInView的一部分，它暴露了a .hasScrollbar method。如果您愿意，请查看at the source。

在您完全控制页面并且不必处理未知CSS的情况下，使用插件可能会过度 - 毕竟，您知道哪些边缘情况适用，哪些不适用？ ;吨。但是，如果您在未知环境中需要可靠的结果，那么我不认为这里列出的解决方案就足够了。你最好使用经过充分测试的插件 - 我的或其他任何人。

Answer 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()。

Answer 6

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

Answer 7

奇怪的是，这些解决方案都没有告诉您页面是否有垂直滚动条。

window.innerWidth - document.body.clientWidth将为您提供滚动条的宽度。这应该适用于任何IE9 +（未在较小的浏览器中测试）。（或严格回答问题!!(window.innerWidth - document.body.clientWidth)

为什么呢？假设您有一个页面，其内容高于窗口高度，用户可以向上/向下滚动。如果您在没有插入鼠标的Mac上使用Chrome，则用户将看不到滚动条。插入鼠标，将出现滚动条。（注意，可以覆盖此行为，但这是默认的AFAIK）。

Answer 8

我找到了vanila解决方案

＆＃13;

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

＆＃13;

Answer 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警报。

将其放在关闭正文标记之后的脚本标记中。

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

Answer 11

其他解决方案在我的某个项目中没有工作，我最终检查溢出css属性

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

但只有当滚动条显示消失时，只有当内容等于或小于窗口时，它才会失效，它才会起作用。

Answer 12

我用

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

Answer 13

只需将文档根元素（即html元素）的宽度与窗口的内部进行比较：

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

如果您还需要知道滚动条的宽度：

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

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

13 个答案: