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

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

javascript html css

JavaScript：获取窗口宽度减去滚动条宽度,javascript,html,css,width,scrollbar,Javascript,Html,Css,Width,Scrollbar,好吧，我以为这会很简单，但事实证明并非如此。我想我只是在我的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"&

好吧，我以为这会很简单，但事实证明并非如此。我想我只是在我的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.js

* {
  padding: 0;
  margin: 0;
}

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

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

$(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中错过了机会

我看了以下几点：

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

有人能提供一些见解吗？（我正在运行Firefox24。）

编辑

为了增加一些背景，我有一个空白页。我将一个接一个地向这个页面添加元素，在计算这些元素的大小时，我需要使用页面的宽度。最终，这个页面将不断增长，直到滚动条出现，这就是为什么我从一开始就试图强制滚动条出现的原因，但显然，这仍然没有起到任何作用

EDIT2

这里有更有趣的事情。。。如果我使用

document.getElementById（'scroll'）.clientWidth

，我会得到正确的innerWidth，但是如果我使用

$（'#scroll'）.width（）

或

$（'#scroll'）.innerWidth（）

，它们都会返回最大分辨率。。。听起来像是jQuery错误。

页面的正确宽度由

$（document）.width（）给出。

。您的问题是在div中使用了一个滚动（溢出：滚动）。使用

$（document）.width（）

返回的值已经扣除了滚动条的可见宽度，但是如何将滚动条放入div中返回的值不再相同。由于滚动条的宽度不是标准的，并且在不同的系统和浏览器之间存在差异，因此很难解决这个问题

我建议您删除div的滚动条，让浏览器在正文中默认管理它，然后是的，您有正确的宽度。

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

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

找到源：

发现了一个非常棘手的解决方案。。。通过在test2.js中的警报之前添加此选项，我可以获得适当的宽度：

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

var p=$（'body'）.append（'p style=“高度：100%；宽度：100%；”>）；警报（p.width（））； $（'body'）。删除（'p'）；因此，所有警报现在都具有适当的宽度。如果我这样做的话，我甚至不需要CSS中的

overflow-y

。奇怪的是，为什么这能解决这个问题

真正的答案应该是保持HTML和CSS的原样，然后使用

document.getElementById（'scroll'）.clientWidth

。使用clientWidth获得可查看区域减去滚动条宽度。

正确答案在本文中标记为已接受：

这是正确的代码：

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' ] };
}

我的问题是。。。假设我有一个空白页面，利用您的知识，没有任何元素上的

溢出：滚动。我使用页面的宽度来调整每次添加一个元素的大小，最终这个页面会扩展到需要滚动条的地方。好吧，一旦滚动条出现在图片中，我之前的所有元素都大小不对，所以现在我运气不好。这有意义吗？嗯，对于像屏幕宽度这样简单的东西来说，这看起来有点复杂。添加了更多的描述。看起来有点复杂，但不是真的。其实这些都是必要的步骤。那时候我也一直在伤脑筋。在宽度测量中看到这些奇怪的结果很有趣…-）这里有更有趣的事情。。。如果我使用document.getElementById（'scroll'）.clientWidth
，我会得到正确的innerWidth，但是如果我使用$（'#scroll'）.width（）
或$（'#scroll'）.innerWidth（），它们都会返回最大分辨率。。。听起来像是一个jQuery错误。我不知道它是否与边距或填充有关，就像我在启动CSS时重置这些设置为零一样。也许这也很有趣。请注意外部灯光（正确）。。嗯，但是我的填充物和边距都归零了。也许我只是不懂宽度/内部宽度？从表的外观来看，宽度不应该包括填充、边框或边距。。。innerWidth应仅包括填充。看起来不是，但它们确实包含滚动条。。。这有点误导。最好的答案在这里。工作得很好！很抱歉，在Chrome中不起作用（撰写本文时为v39）-我仍然可以获得滚动条宽度，包括可能的副本
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' ] };
}