簡單的跨瀏覽器方式在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.