5

在网页上，我需要测试是否有水平滚动条（以便我以编程方式更改其他元素的 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 等移动设备上放大/缩小后也可以工作的水平滚动条的存在吗？

4

2 回答 2

7 
//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 将无法滚动屏幕

于 2013-04-19T19:58:46.767 回答
3

编辑 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;
}

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

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

我很好奇如何以比之前建议的更优雅的方式做到这一点（实际上有效）

以下比较对我有用

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

你可以看到它在滚动条的作用下，没有它

于 2013-04-19T20:12:21.183 回答