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

JavaScript: Get window width minus scrollbar width

本文关键字：滚动条 窗口 JavaScript 获取      更新时间：2023-09-26

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

测试2.css

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
  width: 100%;
}
#scroll {
  height: 100%;
  width: 100%;
  overflow: scroll;
  background-color: black;
}

测试2.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错误。

我在某个地方得到了这个，如果我知道在哪里，我会给予信任，但这对我来说是成功的。我将结果添加为填充，将 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();

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

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

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

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

相关文章：