JavaScript：获取窗口宽度减去滚动条宽度答案

【问题标题】：JavaScript: Get window width minus scrollbar widthJavaScript：获取窗口宽度减去滚动条宽度
【发布时间】：2013-10-10 23:06:21
【问题描述】：

好的，我以为这会很简单，但事实并非如此。我想我只是在我的 HTML/CSS 中弄乱了一些东西，但这里是这样。

我有一个这样的基本页面：

HTML

<!DOCTYPE html>
<html>
  <head>
    <link href='test2.css' rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="test2.js"></script>
  </head>
  <body>
    <div id="scroll"></div>
  </body>
</html>

test2.css

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
  width: 100%;
}

#scroll {
  height: 100%;
  width: 100%;
  overflow: scroll;
  background-color: black;
}

test2.js

$(document).ready(function() {
  // my resolution is 1440x900
  alert('innerwidth should be 1425');
  // all of these return 1440
  alert('body innerwidth: ' + $('body').innerWidth());
  alert('document width: ' + $(document).width());
  alert('window width: ' + $(window).width());
  alert('scroll div innerwidth: ' + $('#scroll').innerWidth());
  alert('document.documentElement.clientWidth: ' + document.documentElement.clientWidth);
  alert('document.documentElement.scrollWidth: ' + document.documentElement.scrollWidth);
});

所以我在页面上有一个元素...一个占据整个屏幕的 div，或者更确切地说，它应该占据整个屏幕减去滚动条。现在，我一直在窥探如何在没有滚动条的情况下获取页面的宽度和高度，但不幸的是，它们都没有返回正确的值......这让我相信我在我的 HTML 中错过了这条船或 CSS。

我查看了以下内容：

jquery - how to get screen width without scrollbar?

how to get the browser window size without the scroll bars

所以我需要一种方法来返回我的可视屏幕的值减去相应的滚动条值......所以对于我的宽度，我的值应该是 1425，因为滚动条是 15 像素宽。我以为这就是 innerWidth 的工作，但显然我错了？

谁能提供任何见解？（我正在运行 Firefox 24。）

编辑

为了添加一些背景，我有一个空白页。我将在此页面中一一添加元素，并且在计算这些元素的大小时需要使用页面的宽度。最终，这个页面会越来越大，直到出现滚动条，这就是为什么我试图从一开始就强制滚动条出现，但显然，这仍然没有任何作用。

EDIT2

这里有一些更有趣的...如果我做document.getElementById('scroll').clientWidth，我得到正确的innerWidth，但如果我做$('#scroll').width() 或$('#scroll').innerWidth()，它们都返回最大分辨率...听起来像一个jQuery 错误.

【问题讨论】：

How to get screen width without (minus) scrollbar?的可能重复

标签： javascript html css width scrollbar

【解决方案1】：

正确答案在这篇标记为已接受的帖子中： CSS media queries and JavaScript window width do not match

这是正确的代码：

function viewport() {
  var e = window, a = 'inner';
  if (!('innerWidth' in window )) {
    a = 'client';
    e = document.documentElement || document.body;
  }
  return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

【讨论】：

最佳答案在这里。效果很好！
抱歉，在 Chrome 中不起作用（撰写本文时为 v39） - 我仍然包含滚动条宽度

【解决方案2】：

发现了一个非常 hacky 的解决方案...通过在 test2.js 中的警报之前添加它，我得到了正确的宽度：

var p = $('body').append('<p style="height: 100%; width: 100%;"></p>');
alert(p.width());
$('body').remove('p');

因此，所有警报现在都具有适当的宽度。如果我这样做，我什至不需要 CSS 中的overflow-y。很好奇为什么这能解决它...

真正的答案应该是保持 HTML 和 CSS 不变，然后使用 document.getElementById('scroll').clientWidth。使用 clientWidth 得到可视区域减去滚动条宽度。

【讨论】：

【解决方案3】：

我在某个地方得到了这个，如果我知道在哪里，我会给予信任，但这对我来说是成功的。将html溢出设置为隐藏时，我将结果添加为填充。

问题是滚动条是浏览器的功能，而不是网页本身。测量应动态进行。带有滚动条的测量和不带滚动条的测量将解析为计算宽度差。

找到来源：http://www.fleegix.org/articles/2006/05/30/getting-the-scrollbar-width-in-pixels

scrollCompensate = function () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild(inner);

    document.body.appendChild(outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild(outer);

    return (w1 - w2);
}

var htmlpadding = scrollCompensate();

【讨论】：

嗯，对于像屏幕宽度这样简单的东西来说，这看起来有点复杂。
添加了更多描述。看起来有点复杂，其实不然。其实这些都是必要的步骤。那时我也一直在打破我的头。在宽度测量中看到这些奇怪的结果很有趣.. :-)
这里有更有趣的...听起来像一个 jQuery 错误。
我不知道它是否与边距或填充有关，就像我在启动 CSS 时将它们设置为零一样。也许这也很有趣。注意 outerHeight(true) .. see here
嗯，但是我的内边距和边距被清零了。也许我只是不明白宽度/内部宽度？从该表的外观来看，宽度不应该包括填充、边框或边距……innerWidth 应该只包括填充。所以看起来它们不是，但它们确实包含滚动条......这有点误导。

【解决方案4】：

页面的正确宽度由$(document).width() 给出。您的问题是您在 div 中使用了 scroll（overflow:scroll）。使用$(document).width() 返回的值已经在打折 scroll 的可见宽度，但是如何在返回的 div 值中放置 scroll不再一样了。由于scroll的宽度不是标准的，而且因系统和浏览器而异，所以很难解决。

我建议你删除 div 的 scroll 并让浏览器默认在 body 中管理它，那么是的，你有正确的宽度。

【讨论】：

好吧，我遇到的问题是......假设我有一个空白页，并利用您的知识，没有任何元素上的overflow:scroll。我使用页面的宽度来调整我一次添加一个元素的大小，最终这个页面会增长到需要滚动条的位置。好吧，一旦滚动条出现在图片中，我之前的所有元素的大小都错误，所以现在我不走运了。这有意义吗？