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