Question

我看过很多帖子都谈到了浏览器视口的获取宽度，但我想要找到的基本上是浏览器视口的宽度，如果它只是宽度足以避免水平滚动条。

我正在使用Prototype JS框架，并使用纯JavaScript来查看各种选项。例如：

$(document.body).getWidth()和document.body.clientWidth返回视口宽度，不包括边距。
document.documentElement.clientWidth和window.innerWidth返回包含边距的视口宽度。

我也试图偷偷摸摸：我绝对将一个已知宽度的DIV放在页面的右边缘（即CSS right:0），目的是获得它的左边位置，但实际上它与视口的右边缘对齐。

我发现唯一可行的方法是使用JavaScript向右滚动，直到它不再滚动为止（简单地使用scrollBy(1000000, 0)通常就足够了，但是while循环显然会更可靠），然后获取水平滚动偏移并将其添加到视口宽度。但我不想滚动窗口：我想以某种方式检查它！

任何建议都表示赞赏，即使是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>

此输出应显示宽度为2000px，因为这是页面最宽部分的宽度。它没有。

Answer 1

怎么样

window.screen.width;

document.body.style.width = (window.screen.width - 15) + 'px';

window.screen.width - 15足以避免水平滚动条。 15是垂直滚动条宽度。

Answer 2

表示宽度：

document.body.scrollWidth

高度：

document.body.scrollHeight

编辑：对于IE，您必须为正文标记指定position:relative

Answer 3

浏览器不像普通元素那样对待html和body。特别是许多浏览器在如何处理body元素上的scrollWidth等方面确实存在问题。唯一真正的解决方案是将所有内容包装在整个页面的一个巨大div中并使用它。因为div是一个普通的元素，它不会受到导致body和html奇怪行为的bug的影响。

简单的跨浏览器方式在JavaScript中获取WHOLE页面宽度，而不仅仅是视口宽度？

3 个答案: