好的,我认为这真的很简单,但事实并非如此。我想我只是把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] 删除。
我来说两句