3

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

我正在使用 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>

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

4

3 回答 3

0

关于什么

window.screen.width;

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

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

于 2013-03-19T12:27:31.853 回答
0

宽度：

document.body.scrollWidth

身高：

document.body.scrollHeight

编辑：对于 IE，您必须position:relative为 body 标签指定

于 2013-03-19T12:48:59.443 回答
0

浏览器不会将 html 和 body 视为普通元素。特别是许多浏览器在处理 body 元素上的 scrollWidth 等方面确实存在问题。唯一真正的解决方案是将所有内容包装在一个用于整个页面的巨大 div 中并使用它。因为 div 是一个普通元素，所以它不受导致 body 和 html 异常行为的错误的影响。

于 2013-04-26T13:28:37.063 回答