检测页面是否有垂直滚动条？
我只是想要一些简单的JQ / JS来检查当前的页面/窗口（而不是一个特定的元素）是否有一个垂直的滚动条。
谷歌search给我的东西，似乎只是这个基本function过于复杂。
如何才能做到这一点？
$(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大于可见内容的高度，但是。 hasVScrollvariables将包含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");
我试过以前的答案，似乎并没有工作的$（“身体”）。高度（）不一定代表整个HTML的高度。
我已经更正了解决scheme，如下所示：
// 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:<"); }
让我们把这个问题从死亡中带回来）谷歌不给你一个简单的解决scheme是有原因的。 特殊情况和浏览器怪癖影响计算，并不像它看起来那么微不足道。
不幸的是，到目前为止，这里概述的解决scheme存在问题。 我并不是要贬低他们 – 他们是伟大的起点，并触及一个更强大的方法所需的所有关键属性。 但我不会build议复制和粘贴来自任何其他答案的代码，因为
- 他们没有以可靠的跨浏览器的方式捕捉定位内容的效果。 基于身体大小的答案完全错过了（身体不是这样的内容的抵消父母，除非它是自己定位的）。 那些检查
$( document ).width()和.height()答案是jQuery检测文档大小的.height()。 - 依赖于
window.innerWidth，如果浏览器支持它，会让你的代码在移动浏览器中检测不到滚动条，滚动条的宽度通常是0.它们只是临时显示为覆盖，不占用空间在文件中。 放大移动也成为一个问题（长话短说）。 - 当人们明确地将
html和body元素的溢出设置为非默认值时，检测可以被抛出（然后会发生什么，稍微有点牵扯 – 参见这个描述 ）。 - 在大多数答案中，没有检测到身体填充，边界或边距，并扭曲结果。
我花了比我想象的更多的时间find一个“正常”（咳嗽）的解决scheme。 我现在提出的algorithm现在是插件jQuery.isInView的一部分，该插件公开了.hasScrollbar方法 。 如果你愿意看看源代码 。
在你完全控制页面的情况下，不必处理未知的CSS，使用插件可能是矫枉过正 – 毕竟，你知道哪些边缘情况适用，哪些不适用。 但是，如果您在一个未知的环境中需要可靠的结果，那么我认为这里列出的解决scheme是不够的。 你最好使用经过充分testing的插件 – 我的或任何其他人。
这个对我有用：
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; } }
对于body，只需使用hasVerticalScroll() 。
var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;
我发现了vanila解决scheme
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>
这个会告诉你，如果你有一个滚动条或不。 我已经包含了一些可能有助于debugging的信息，这些信息将显示为JavaScript警报。
把它放在一个script标签中，在closures的body标签之后。
奇怪的是这些解决scheme都没有告诉你一个页面是否有一个垂直滚动条。
window.innerWidth - document.body.clientWidth会给你滚动条的宽度。 这应该适用于任何IE9 +（不在较小的浏览器中testing）。 （或者严格地回答这个问题， !!(window.innerWidth - document.body.clientWidth)
为什么？ 比方说，你有一个页面的内容比窗口高度高，用户可以上下滚动。 如果您在没有插入鼠标的Mac上使用Chrome，用户将看不到滚动条。 插入一个鼠标，将出现一个滚动条。 （注意这个行为可以被覆盖，但这是默认的AFAIK）。
