8

好吧，我以为这会很简单，但事实证明并非如此。我想我只是在我的 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 - 如何在没有滚动条的情况下获得屏幕宽度？

如何在没有滚动条的情况下获取浏览器窗口大小

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

任何人都可以提供任何见解吗？（我正在运行 Firefox 24。）

编辑

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

编辑2

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

4

4 回答 4

3

正确答案在这篇标记为已接受的帖子中： CSS 媒体查询和 JavaScript 窗口宽度不匹配

这是正确的代码：

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' ] };
}
于 2014-08-09T14:24:11.680 回答
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();
于 2013-10-04T04:10:10.157 回答
2

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

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

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

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

于 2013-10-04T04:43:44.653 回答
1

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

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

于 2013-10-04T04:08:09.383 回答