我看过很多关于获取浏览器视口(viewport)宽度的帖子,但我想找到的本质上是浏览器视口(viewport)的宽度,如果它的宽度刚好足以避免水平滚动条的话。
我正在使用 Prototype JS 框架,并研究了使用它和使用纯 JavaScript 的各种选项。例如:
$(document.body).getWidth()
和document.body.clientWidth
返回不包括边距的视口(viewport)宽度。document.documentElement.clientWidth
和window.innerWidth
返回视口(viewport)宽度,包括边距。
我也曾尝试偷偷摸摸:我将一个已知宽度的 DIV 绝对定位在页面的右手边缘(即 CSS right:0
),目的是获取它的左边缘位置,但实际上与视口(viewport)的右边缘对齐。
我发现唯一可行的方法是使用 JavaScript 向右滚动,直到它不再滚动(只需使用 scrollBy(1000000, 0)
通常就足够了,但需要一段时间loop 显然会更可靠),然后获取水平滚动偏移并将其添加到视口(viewport)宽度。但我不想滚动窗口:我想以某种方式检查它!
感谢任何建议,即使是 jQuery 的建议,至少我可以看到 jQuery 是如何做到的。
这是一个简单的示例,显示 document.body.scrollWidth
不起作用:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body onload="document.getElementById('sw').innerHTML = document.body.scrollWidth">
<p><code>document.body.scrollWidth</code> = <span id="sw"></span></p>
<div style="position:absolute;left:0;bottom:0;width:1980px;background-color:#ccc;padding:10px;">This DIV is 2000px wide including padding.</div>
</body>
</html>
此输出应显示宽度为 2000 像素,因为这是页面最宽部分的宽度。它没有。
最佳答案
关于
window.screen.width;
document.body.style.width = (window.screen.width - 15) + 'px';
window.screen.width - 15
足以避免水平滚动条。 15
是垂直滚动条的宽度。
关于javascript - 在 JavaScript 中获取整个页面宽度的简单跨浏览器方法,而不仅仅是视口(viewport)宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15499358/