javascript - 在 JavaScript 中获取整个页面宽度的简单跨浏览器方法,而不仅仅是视口(viewport)宽度?

标签 javascript prototypejs width

我看过很多关于获取浏览器视口(viewport)宽度的帖子,但我想找到的本质上是浏览器视口(viewport)的宽度,如果它的宽度刚好足以避免水平滚动条的话。

我正在使用 Prototype JS 框架,并研究了使用它和使用纯 JavaScript 的各种选项。例如:

  • $(document.body).getWidth()document.body.clientWidth 返回不包括边距的视口(viewport)宽度。
  • document.documentElement.clientWidthwindow.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/

相关文章:

javascript - 如何动态地将一组div放置在网页的容器中心内

javascript - Meteor 集成测试,使用 jasmine 在 Velocity 镜像中休息 api 端点

javascript - 当用户在 HTML 文本输入中键入退格键时,如何避免返回导航?

javascript - 在页面上多次使用时 iframe 的问题

javascript - 许多列的数据表宽度溢出

javascript - 在数组中查找最佳路线和价格

javascript - 为什么 (jQuery) 在函数右括号之后

javascript - 原型(prototype),Google Maps Ajax API V3 - 错误但不确定原因。 - g.e 未定义

css width % 工作不正常;比必要的时间更长

html - 调整绝对 DIV block 的宽度