Question

好吧，我觉得这很简单，但事实并非如此。我想我只是在我的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，我会得到正确的内部宽度，但是如果我做$('#scroll').width()或$('#scroll').innerWidth()，它们都会返回最大分辨率。听起来像是一个jQuery bug。

Answer 1

我得到了这个地方，如果我知道在哪里会给予赞扬，但这对我来说是成功的。在将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();

Answer 2

发现了一个非常糟糕的解决方案......通过在 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获取可视区域减去滚动条宽度。

Answer 3

正确答案在此帖中标记为已接受： 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' ] };
}

Answer 4

页面的正确宽度由$(document).width()给出。您的问题是您在 div 中使用滚动（溢出：滚动）。使用$(document).width()返回的值已经折扣滚动的可见宽度，但是如何在 div 中放置滚动返回的值不再相同。由于 scroll 的宽度不是标准的，因系统和浏览器而异，因此很难解决。

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

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

4 个答案: