Html JavaScript：获取窗口宽度减去滚动条宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19172936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript: Get window width minus scrollbar width
提问by incutonez
Ok, I thought this would be really simple, but it's turning out not to be. I think I'm just messing something up in my HTML/CSS, but here goes.
好吧，我以为这会很简单，但事实证明并非如此。我想我只是在我的 HTML/CSS 中搞砸了一些东西，但这里是。
I have a basic page like so:
我有一个像这样的基本页面：
HTML
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
测试2.css
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
#scroll {
height: 100%;
width: 100%;
overflow: scroll;
background-color: black;
}
test2.js
测试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);
});
So I've got one element on the page... a div that takes up the entire screen, or rather it should be taking up the entire screen minus the scrollbars. Now, I've been doing some snooping on how to grab the width and height of a page without the scrollbars, but unfortunately, none of them return the proper value... which makes me believe I'm missing the boat in my HTML or CSS.
所以我在页面上有一个元素......一个占据整个屏幕的div，或者更确切地说它应该占据整个屏幕减去滚动条。现在，我一直在窥探如何在没有滚动条的情况下获取页面的宽度和高度，但不幸的是，它们都没有返回正确的值......这让我相信我在我的 HTML 中错过了这条船或 CSS。
I looked at the following:
我看了以下内容：
jquery - how to get screen width without scrollbar?
how to get the browser window size without the scroll bars
So what I need is for a method to return the value of my viewable screen minus the respective scrollbar value... so for my width, my value should be 1425 because the scrollbar is 15 pixels wide. I thought that's what innerWidth's job was, but apparently I'm wrong?
所以我需要的是一种方法来返回我的可视屏幕的值减去相应的滚动条值......所以对于我的宽度，我的值应该是 1425，因为滚动条是 15 像素宽。我以为这就是innerWidth的工作，但显然我错了？
Can anyone provide any insight? (I'm running Firefox 24.)
任何人都可以提供任何见解吗？（我正在运行 Firefox 24。）
EDIT
编辑
To add some background, I've got a blank page. I will be adding elements one by one to this page, and I need to use the width of the page when calculating the sizes for these elements. Eventually, this page will grow and grow until the scrollbar appears, which is why I'm trying to force the scrollbar there from the start, but apparently, that still doesn't do anything.
为了添加一些背景，我有一个空白页。我将一个一个地向这个页面添加元素，并且在计算这些元素的大小时需要使用页面的宽度。最终，这个页面会不断增长，直到滚动条出现，这就是为什么我试图从一开始就强制滚动条出现在那里，但显然，这仍然没有任何作用。
EDIT2
编辑2
Here's something even more interesting... if I do document.getElementById('scroll').clientWidth, I get the proper innerWidth, but if I do $('#scroll').width()or $('#scroll').innerWidth(), they both return the max resolution... sounds like a jQuery bug.
这里有一些更有趣的东西......如果我这样做document.getElementById('scroll').clientWidth，我会得到正确的innerWidth，但如果我这样做$('#scroll').width()或$('#scroll').innerWidth()，他们都返回最大分辨率......听起来像一个jQuery错误。
采纳答案by incutonez
Discovered a very hacky solution... by adding this before my alerts in test2.js, I get the proper width:
发现了一个非常hacky的解决方案......通过在我的test2.js警报之前添加这个，我得到了正确的宽度：
var p = $('body').append('<p style="height: 100%; width: 100%;"></p>');
alert(p.width());
$('body').remove('p');
And consequently, all of the alerts now have the proper width. I also don't even need overflow-yin the CSS if I do it this way. Curious why this solves it...
因此，所有警报现在都具有适当的宽度。overflow-y如果我这样做，我什至不需要在 CSS 中。好奇为什么这可以解决它......
The real answer should be keeping the HTML and CSS as is, then using document.getElementById('scroll').clientWidth. Using clientWidth gets the viewable area minus the scrollbar width.
真正的答案应该是保持 HTML 和 CSS 不变，然后使用document.getElementById('scroll').clientWidth. 使用 clientWidth 获取可视区域减去滚动条宽度。
回答by Daniel
I got this somewhere and would give credit if I knew where, but this has been succesfull for me. I added the result as padding when setting the html overflow to hidden.
我在某个地方得到了这个，如果我知道在哪里，我会给予信任，但这对我来说是成功的。将 html 溢出设置为隐藏时，我将结果添加为填充。
Problem is that the scrollbar is a feature of the browser and not the web page self. Measurement should be done dynamically. A measurement with a scrollbar and a measurement without a scrollbar will resolve into calculating the difference in width.
问题是滚动条是浏览器的一个功能，而不是网页本身。测量应动态进行。带滚动条的测量和不带滚动条的测量将解析为计算宽度差异。
Found the source:http://www.fleegix.org/articles/2006/05/30/getting-the-scrollbar-width-in-pixels
找到来源：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();
回答by Tim Baas
The correct answer is in this post marked as accepted: CSS media queries and JavaScript window width do not match
正确答案在这篇文章中标记为已接受： CSS 媒体查询和 JavaScript 窗口宽度不匹配
This is the correct code:
这是正确的代码：
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' ] };
}
回答by Walter Gandarella
The correct width of the page is given by $(document).width().
Your problem is that you're using a scrollwithin the div(overflow: scroll).
Using $(document).width()the returned value is already discounting the visible width of the scroll, but how do you put a scrollwithin the divvalue returned is no longer the same.
As the width of the scrollis not standard and varies from system to system and browser to browser, it is difficult to solve.
页面的正确宽度由 给出$(document).width()。你的问题是，您使用的是滚动的内格（溢出：滚动）。使用$(document).width()返回值已经打折了scroll的可见宽度，但是如何在返回的div值内放置滚动不再相同。由于滚动条的宽度不标准，并且因系统和浏览器而异，因此很难解决。
I suggest you remove the scrollof the divand let the browser manage this by default in the body, then yes you have the correct width.
我建议你移除div的滚动条，让浏览器默认在body 中管理它，然后是的，你有正确的宽度。
