测试页面是否有水平滚动条（计算机和移动设备）答案

【问题标题】：Test if page has a horizontal scrollbar (computer & mobile devices)测试页面是否有水平滚动条（计算机和移动设备）
【发布时间】：2014-06-17 20:04:20
【问题描述】：

在网页上，我需要测试是否有水平滚动条（以便我以编程方式更改某些其他元素的 css）。有没有办法使用 jquery（或纯 javascript）获取这些信息？

我测试过

function isHorizontalScrollbarEnabled() {
    return $(document).width()!=$(window).width();
}

但它似乎不适用于所有浏览器（例如不适用于我测试过的最近的三星手机）。我需要它支持所有浏览器，包括最近的移动设备。

谢谢！

编辑 1

我测试了 plalx 和 laconbass 提供的解决方案，测试了 IE8、Firefox、Chrome 和 iPad。适用于 IE、Firefox 和 Chrome，但在 iPad 上不是我想要的。

问题似乎与移动设备上的缩放功能有关：尽管当我在 iPad 上放大时，会出现一个水平滚动条，document、window 和 document.body 宽度没有改变（也是我今天早些时候测试的三星手机也有同样的问题）。

这是我用来测试的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
      <title>test</title>
    </head>

    <body>
      <div style="width: 500px; background: red;" id="test">click here to test</div>
      <script type="text/javascript">
        var i = 1;
        $("#test").click(function(){
          $(this).html("Test #" + (i++) 
    + "<br>document width=" + $(document).width() + ", windows width=" + $(window).width()
    + "<br>document width=" + $(document).width() + ", body width=" + $(document.body).width()
          );  
        });     
      </script>
    </body>
</html>

知道如何检测在 iPad 等移动设备上放大/缩小后也可以工作的水平滚动条的存在吗？

【问题讨论】：

stackoverflow.com/questions/2059743/… 的可能重复项
我尝试了该帖子中建议的解决方案，适用于 chrome 但适用于 firefox，即使有水平滚动条，$("body")[0].scrollWidth 和 $("body")[0].clientWidth 也相同。
@plalx 也许问题是一样的，但 IMO 这个问题要清楚得多
这个问题你解决了吗？

标签： javascript jquery html cross-browser scrollbar

【解决方案1】：

//scrol 1px to the left
$(document).scrollLeft(1);

if($(document).scrollLeft() != 0){
   //there's a scroll bar
}else{
   //there's no scrollbar
}

//scroll back to original location
$(document).scrollLeft(0);

这是可行的，因为如果没有可用的滚动条，JQuery 将无法滚动屏幕

【讨论】：

实用但不优雅，IMO
我喜欢它，因为它是检测对象功能而不是使用数学来从理论上确定是否有滚动条。实际上，我认为它更优雅。
@mrbinky3000 我同意这样一个事实，即检测功能而不是理论上的计算更正确。我不同意它更优雅，优雅不仅仅是特征。重构肯定会改变我的看法；）
此解决方案有效，而 elem.get(0).scrollWidth > elem.width() 在 Chrome 中对我来说失败了。 +1
例如不适用于此站点keithclark.co.uk/articles/practical-css-parallax/…。

【解决方案2】：

编辑 2：我投了反对票，因为这对页面没有任何作用，所以我根据@Pabs123 的回答构建了一个通用解决方案，只是为了好玩：

function hasScrollX( selector ){
    var e = $(selector), fn = 'scrollLeft';
    return e[fn](1) && e[fn]() > 0 && e[fn](0) && true;
}

甚至

jQuery.fn.hasScrollX = function( ){
    var fn = 'scrollLeft';
    return this[fn](1) && this[fn]() > 0 && this[fn](0) && true;
}

查看here，以及如何轻松调整它以检测垂直滚动条的存在。

编辑：在 chrome 和 firefox 上测试和工作。由于 jQuery 团队负责跨浏览工作，我建议使用 jQuery 而不是原生 javascript。

我很好奇如何以比之前建议的更优雅的方式执行此操作（实际上有效）

以下比较对我有用

$(document).width() > $(window).width()

您可以在with scroll bar 和without it 中看到它

【讨论】：

我看到很多实现此解决方案的答案，但它在文本区域对我来说并不可靠。
@tponthieux pabs123 发布的滚动功能检测应该适用于您的情况，检查一下