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

$(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变量将包含 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:<");
}

这个对我有用:

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

让我们把这个问题从死亡中带回来;)谷歌不给你一个简单的解决方案是有原因的。特殊情况和浏览器异常会影响计算，而且计算并不像看起来那么简单。

不幸的是，到目前为止，这里概述的解决方案存在一些问题。我无意贬低它们——它们是一个伟大的起点，触及到了更健壮方法所需的所有关键属性。但我不建议复制粘贴其他答案的代码，因为

• 它们不能以可靠的跨浏览器方式捕捉定位内容的效果。基于主体大小的答案完全忽略了这一点(主体不是这类内容的偏移父母，除非它自己定位)。那些检查 $( document ).width()和 .height()的答案就会落入 JQuery 对文档大小的错误检测的陷阱。
• 依赖于 window.innerWidth，如果浏览器支持它，使您的代码无法检测移动浏览器中的滚动条，其中滚动条的宽度通常为0。它们只是暂时显示为一个覆盖层，不占用文档中的空间。在手机上缩放也成为一个问题(说来话长)。
• 当人们显式地将 html和 body元素的溢出设置为非默认值时，检测就会失效(那时发生的情况有点复杂——参见 这个描述)。
• 在大多数答案中，没有检测到填充物、边框或边距，从而扭曲了结果。

我花了比我想象中更多的时间来寻找一个“仅仅有效”的解决方案(咳嗽)。我提出的算法现在是一个插件 IsInView的一部分，它暴露了 一种 .hasScrollbar方法。如果你愿意，可以看看 在源头。

在完全控制页面并且不需要处理未知 CSS 的情况下，使用插件可能有点过分——毕竟，你知道哪些边界情况适用，哪些不适用。然而，如果您需要在未知环境中获得可靠的结果，那么我认为这里概述的解决方案将是不够的。您最好使用经过良好测试的插件矿或其他任何人。

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

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

window.innerWidth - document.body.clientWidth将显示滚动条的宽度。这应该可以工作在任何 IE9 + (不测试在较小的浏览器)。(或者严格回答这个问题，!!(window.innerWidth - document.body.clientWidth)

为什么？假设您有一个内容高于窗口高度的页面，用户可以向上/向下滚动。如果你在 Mac 电脑上使用 Chrome 浏览器而没有插入鼠标，用户将看不到滚动条。将鼠标插入，将出现滚动条。(注意这个行为可以被覆盖，但这是默认的 AFAIK)。

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

将其放入脚本标记中，在结束主体标记之后。

其他解决方案在我的一个项目中不起作用，我最终检查了 overflow css 属性

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

但它只会工作，如果滚动条出现消失通过改变道具它不会工作，如果内容是相等或小于窗口。

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

我吸毒

function 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;