使用 jQuery 检测滚动条是否存在仍然很困难？答案

【问题标题】：Is detecting scrollbar presence with jQuery still difficult?使用 jQuery 检测滚动条是否存在仍然很困难？
【发布时间】：2011-02-04 00:25:29
【问题描述】：

我知道检测滚动条的存在应该是我们都应该经历的那些难以捉摸的事情之一。到目前为止，我读到的是，您无法真正检测到滚动条的存在，只能使用 DOM 中的提示来知道它们是否存在可能，并且不能在 30 内完成代码行。

现在我们在 2010 年，这对我来说听起来有点不可能。jQuery 是否有一个跨浏览器可靠的解决方案来处理这个问题并且至少在大部分时间都可以工作？请帮忙，我正在拉我的头发，一半已经在地板上了。

【问题讨论】：

这可能是幼稚的做法，但var scrollbar_present = $(document).height > $(window).height() 有什么问题？
我还没有深入研究 jQuery 实现，以了解这一行实现了哪些 vanilla javascript 代码。这可能就是我所需要的吗？如果这是在 jQuery 中完成的标准方式，那么我肯定会使用它。有人反对这个解决方案吗？
@Yaggo，好的，我刚刚测试了$(document).height > $(window).height()，无论我是否看到滚动条，它都会给我错误。所以我猜它可能不起作用。
抱歉，有错字，已更正版本：var scrollbar_present = $(document).height() > $(window).height()。在 Safari 上为我工作。
stackoverflow.com/questions/2647761/…

标签： javascript jquery scrollbar

【解决方案1】：

可能没有您希望的那么优雅，但这是对我最近编写的用于计算视口高度的脚本的充分改编。

从逻辑上讲，您希望在 document ready 和 window resize 上调用此函数。

它还处理您在 Opera ^{(line 2)} 和 IE7 ^{(line 6)} 中遇到的不一致问题。

function scrollbar() {
    var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();

    if (jQuery.browser.msie) {
        if(parseInt(jQuery.browser.version) == 7) {
            viewportHeight -= 3;
        }
    }

    if(viewportHeight <= $('#wrapper').height()) {
        return true;
    } else {
        return false;
    }
}

【讨论】：

+1 不错，但没有考虑到overflow: hidden，这可能会阻止滚动条出现。
我认为只要#wrapper 不是带有overflow: hidden 的元素，它就可以工作——比如说它被包裹在#outer-wrapper 中并且有overflow: hidden； #wrapper的高度不会保持不变吗？
您也可以将最后几行重构为像这样return (viewportHeight <= $('#wrapper').height()) ? true : false; 的 1-liner tertiary，但我已经对其进行了测试，但我仍然得到一个错误，不知道出了什么问题。我想我可能在某个地方遇到了 javascript/jquery 冲突，或者我错误地调用了这些函数。
我想您甚至可以以某种方式将? true : false 从末尾敲掉，不过我懒得检查我的语法。您确定您的#wrapper 正在占据其内容的全部高度吗？也许你可以在最后尝试一个 clearfix？
你可以只写return viewportHeight <= $('#wrapper').height()，它总是返回真或假，因为< > == <= => !=是布尔运算符。