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

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

我想以前的答案似乎并没有被工作$（“身体”）。 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

这个人做了对我的作品：

function hasVerticalScroll(node){ 
    if(node == undefined){ 
     if(window.innerHeight){ 
      return document.body.offsetHeight> innerHeight; 
     } 
     else { 
      return document.documentElement.scrollHeight > 
       document.documentElement.offsetHeight || 
       document.body.scrollHeight>document.body.offsetHeight; 
     } 
    } 
    else { 
     return node.scrollHeight> node.offsetHeight; 
    } 
} 

为体，只是用hasVerticalScroll()。

Answer 5

我发现vanila解决方案

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

Answer 6

让我们把这个问题不理不睬;）是有原因的谷歌不给你一个简单的解决方案。特殊情况和浏览器怪癖影响计算，并不像它看起来那么微不足道。

不幸的是，到目前为止所列的解决方案存在问题。我并不是故意贬低它们 - 它们是很好的起点，并触及一个更强大方法所需的所有关键属性。但我不会建议复制和粘贴其他答案中的代码，因为

• 他们没有以可靠的跨浏览器捕获定位内容的效果。基于身体大小的答案完全错过了（身体不是这种内容的抵消父母，除非它是自己定位的）。那些检查$(document).width()和.height()的答案为jQuery's buggy detection of document size。
• 依靠window.innerWidth，如果浏览器支持它，会使您的代码无法检测到移动浏览器中的滚动条，滚动条的宽度通常为0.它们只是临时显示为叠加层，并且不占用文档中的空间。放大移动也成为一个问题（长话短说）。
• 当人们明确将html和body元素的溢出设置为非默认值（然后会发生什么情况稍微涉及 - 请参阅this description）时，可以丢弃检测结果。
• 在大多数答案中，未检测到身体填充，边框或边距并扭曲结果。

我花了更多的时间比我想象的找到一个“正常工作”（咳嗽）的解决方案。我提出的算法现在是插件jQuery.isInView的一部分，该插件公开a .hasScrollbar method。如果你愿意，看看at the source。

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

Answer 7

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

Answer 8

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

window.innerWidth - document.body.clientWidth会给你滚动条的宽度。这应该适用于任何IE9 +（未在较小的浏览器中测试过）。 （或者要严格回答这个问题，!!(window.innerWidth - document.body.clientWidth)

为什么？比方说，你有一个页面的内容高于窗口高度，用户可以向上/向下滚动如果你在Mac上使用Chrome浏览器鼠标插入，用户将无法看到滚动条。插头的鼠标和滚动条就会出现。（注意：这种行为可以被覆盖，但是这是默认据我所知）。

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警报。将此放在脚本标记中，在关闭身体标记之后。