如何使用滚动条可靠地获取屏幕宽度
Posted
技术标签:
【中文标题】如何使用滚动条可靠地获取屏幕宽度【英文标题】：How to reliably get screen width WITH the scrollbar 【发布时间】：2011-12-30 23:17:38 【问题描述】：有没有办法可靠地告诉浏览器的视口宽度（包括滚动条，但不包括浏览器窗口的其余部分）？
here 列出的所有属性都没有告诉我屏幕的宽度，包括滚动条（如果存在）
【问题讨论】：
为什么需要包含滚动条的宽度？更不用说，一些浏览器在视口的左右两侧也有 1-4 像素的边框。我什至不明白为什么人们需要outerWidth 和outerHeight...
@animuson：我动态设置了一些元素的宽度，并且根据浏览器呈现布局的方式（版本、屏幕大小等），有时会有一个滚动条，后来消失了页面上的“滚动条阴影”。如果我提前知道没有滚动条的宽度会简单得多。
另见***.com/q/8339377/1136253
【参考方案1】：
使用jQuery，您可以通过设置overflow: hidden 和overflow: scroll 时的宽度差来计算浏览器的滚动条宽度。
宽度的差异将是滚动条的大小。
这里有一个 simple example，它展示了如何做到这一点。
【讨论】：
我确实在网上看到了很多这样的例子，但对此持谨慎态度，因为似乎如果与页面中的其他样式表发生冲突，它可能不会给出正确的结果。 确保您必须尝试它是否适用于您的页面。正如 ThinkingStiff 所说，将 body width 设置为 100% 很重要。【参考方案2】：只要 body 是 100%，document.body.scrollWidth 就可以工作。
演示：http://jsfiddle.net/ThinkingStiff/5j3bY/
html：
<div id="widths"></div>
CSS：
body, html
margin: 0;
padding: 0;
width: 100%;
div
height: 1500px;
脚本：
var widths = 'viewport width (body.scrollWidth): '
+ document.body.scrollWidth + '<br />'
+ 'window.innerWidth: ' + window.innerWidth + '<br />';
document.getElementById( 'widths' ).innerHTML = widths;
我在演示中放了一个高 div 来强制滚动条。
【讨论】：
这似乎不一致。 JSFiddle 给了我 body.scrollWidth: 580, window.innerWidth: 588。我会在这个线程中添加我自己的解决方案。 @YoYoYonnY 我认为这可能是 JSFiddle 的 iFrame 问题。告诉我你发现了什么。 问题在 Ubuntu Chrome 中仍然存在：document.body.scrollWidth: 1351, window.innerWidth: 1366【参考方案3】：
我假设您想知道包含滚动条的视口宽度，因为它本身的屏幕没有滚动条。事实上，屏幕宽度和高度将是计算机屏幕分辨率本身，所以我不确定您的意思是 滚动条的屏幕宽度。
然而，视口，只有页面（和滚动条）呈现给用户的区域，也就是说，没有浏览器菜单、没有书签或其他任何东西，只有呈现的页面，才是可能存在这种滚动条的地方。
假设您愿意，您可以测量客户端浏览器视口的大小，同时以这种方式考虑滚动条的大小。
首先不要忘记将身体标签设置为 100% 的宽度和高度，以确保测量准确。
body
width: 100%;
// if you wish to also measure the height don't forget to also set it to 100% just like this one.
之后你可以随意测量宽度。
示例
// First you forcibly request the scroll bars to be shown regardless if you they will be needed or not.
$('body').css('overflow', 'scroll');
// Viewport width with scroll bar.
var widthWithScrollBars = $(window).width();
// Now if you wish to know how many pixels the scroll bar actually has
// Set the overflow css property to forcibly hide the scroll bar.
$('body').css('overflow', 'hidden');
// Viewport width without scroll bar.
var widthNoScrollBars = $(window).width();
// Scroll bar size for this particular client browser
var scrollbarWidth = widthWithScrollBars - widthNoScrollBars;
// Set the overflow css property back to whatever value it had before running this code. (default is auto)
$('body').css('overflow', 'auto');
希望对你有帮助。
【讨论】：
【参考方案4】：我想出了如何使用以下代码通过滚动条准确获取视口宽度：http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript
把这个放在你的$(document).ready(function()
$(document).ready(function()
$(window).on("resize", function()
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' ] ;
);
// Get the correct window sizes with these declarations
windowHeight = viewport().height;
windowWidth = viewport().width;
);
它的作用：
当您的页面“准备就绪”或调整大小时，该函数会计算正确的窗口高度和宽度（包括滚动条）。
【讨论】：
【参考方案5】：你可以通过滚动条获得窗口宽度，这样：
function scrollbar_width()
if (jQuery('body').height() > jQuery(window).height())
/* Modified from: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php */
var calculation_content = jQuery('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
jQuery('body').append(calculation_content);
var width_one = jQuery('div', calculation_content).innerWidth();
calculation_content.css('overflow-y', 'scroll');
var width_two = jQuery('div', calculation_content).innerWidth();
jQuery(calculation_content).remove();
return (width_one - width_two);
return 0;
【讨论】：
【参考方案6】：查看大众：http://dev.w3.org/csswg/css-values/#viewport-relative-lengths
body
width: 100vw;
http://caniuse.com/#search=vw
【讨论】：
【参考方案7】：目前新的 vw 和 vh css3 属性将显示完整大小，包括滚动条。
body
width:100vw;
height:100vh;
这是否是一个错误，网上有一些讨论。
【讨论】：
【参考方案8】：滚动条之后什么都没有，所以“窗口的其余部分”是什么？
但是是的，一种方法是在 body 中创建另一个包装 div，所有内容都进行，并且 body 上有 overflow:none; height:100%; width:100%;，包装 div 也有 100% 的宽度和高度。并溢出滚动。所以现在......包装器的宽度将是视口的宽度
参见示例：http://jsfiddle.net/techsin/8fvne9fz/
html,body
height: 100%;
overflow: hidden;
.wrapper
width: 100%;
height: 100%;
overflow: auto;
【讨论】：
【参考方案9】：这是我删除“滚动条阴影”的解决方案，因为 scrollWidth 对我不起作用：
canvas.width = element.offsetWidth;
canvas.height = element.offsetHeight;
canvas.width = element.offsetWidth;
canvas.height = element.offsetHeight;
这很简单，但很有效。请务必添加注释，解释为什么您两次分配相同的值:)
【讨论】：
以上是关于如何使用滚动条可靠地获取屏幕宽度的主要内容，如果未能解决你的问题，请参考以下文章