简单的跨浏览器方式在JavaScript中获取WHOLE页面宽度，而不仅仅是视口宽度？
[英]Simple, cross-browser way to get the WHOLE page width in JavaScript, not just the viewport width?
问题描述
我已经看过很多关于浏览器视口获取宽度的帖子，但我想要找到的实际上是浏览器视口的宽度，如果它只是宽度足以避免水平滚动条。
我正在使用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，因为这是页面最宽部分的宽度。 它没有。
3 个解决方案
解决方案1
0
关于什么
window.screen.width;
document.body.style.width = (window.screen.width - 15) + 'px';
window.screen.width - 15足以避免水平滚动条。 15是垂直滚动条宽度。
解决方案2
0 2013-03-19 12:48:59
宽度：
document.body.scrollWidth
高度：
document.body.scrollHeight
编辑：对于IE，你必须为body标签指定position:relative
解决方案3
0 2013-04-26 13:28:37
浏览器不像普通元素那样对待html和body。 特别是许多浏览器在如何处理body元素上的scrollWidth等方面确实存在问题。 唯一真正的解决方案是将所有内容包装在整个页面的一个巨大div中并使用它。 因为div是一个普通元素，所以它不会受到导致body和html奇怪行为的bug的影响。
以跨浏览器的方式查找视口的确切高度和宽度（无原型/ jQuery）
[英]Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery)
没有使用跨浏览器表达式的滚动条就无法获得屏幕宽度
[英]Cannot get width of screen without scrollbar using cross-browser expression
有没有跨浏览器的方法来获得带有滚动条的DIV的宽度（如果存在）？
[英]Is there any cross browser way to get width of a DIV with scrollbars(if present)?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.