好的，我认为这真的很简单，但事实并非如此。我想我只是把HTML / CSS中的内容弄乱了，但这是可行的。
我有一个像这样的基本页面：
的HTML
<!DOCTYPE html>
<html>
<head>
<link href='test2.css' rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="test2.js"></script>
</head>
<body>
<div id="scroll"></div>
</body>
</html>
test2.css
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
#scroll {
height: 100%;
width: 100%;
overflow: scroll;
background-color: black;
}
test2.js
$(document).ready(function() {
// my resolution is 1440x900
alert('innerwidth should be 1425');
// all of these return 1440
alert('body innerwidth: ' + $('body').innerWidth());
alert('document width: ' + $(document).width());
alert('window width: ' + $(window).width());
alert('scroll div innerwidth: ' + $('#scroll').innerWidth());
alert('document.documentElement.clientWidth: ' + document.documentElement.clientWidth);
alert('document.documentElement.scrollWidth: ' + document.documentElement.scrollWidth);
});
因此，我在页面上有一个元素...一个div占据了整个屏幕，或者应该是整个屏幕减去滚动条。现在，我一直在窥探如何在没有滚动条的情况下获取页面的宽度和高度，但是不幸的是，它们都没有返回正确的值……这使我相信我在HTML中缺少了这条船或CSS。
我看了以下内容：
因此，我需要一种方法来返回可见屏幕的值减去相应滚动条的值...因此，对于我的宽度，我的值应为1425，因为滚动条的宽度为15像素。我以为那是innerWidth的工作，但是显然我错了？
谁能提供任何见解？（我正在运行Firefox24。）
编辑
要添加一些背景，我有一个空白页。我将在此页面上一个一个地添加元素，在计算这些元素的大小时，需要使用页面的宽度。最终，该页面会不断增长，直到滚动条出现为止，这就是为什么我试图从一开始就强制将滚动条放在那儿的原因，但是显然，它什么也没做。
编辑2
这里的东西更有意思的......如果我这样做document.getElementById('scroll').clientWidth，我得到正确的innerWidth，但如果我做的$('#scroll').width()还是$('#scroll').innerWidth()，他们都返回最大分辨率......听起来像一个jQuery错误。
发现了一个非常棘手的解决方案...通过在test2.js的警报之前添加此代码，我得到了适当的宽度：
var p = $('body').append('<p style="height: 100%; width: 100%;"></p>');
alert(p.width());
$('body').remove('p');
因此，所有警报现在都具有适当的宽度。overflow-y如果我这样做，我什至不需要CSS。很好奇为什么这可以解决...
真正的答案应该是保持HTML和CSS不变，然后使用document.getElementById('scroll').clientWidth。使用clientWidth可以得到可视区域减去滚动条宽度。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句