如何通过滚动条可靠地获取屏幕宽度

Question

有没有办法可靠地告诉浏览器的包含滚动条的浏览窗口宽度，但浏览器窗口的其余部分不是）？

无属性的上市here告诉我屏幕的宽度，包括滚动条（如果存在）

Answer 1

只要身体是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在演示强制滚动酒吧。

Answer 2

使用jQuery，您可以通过获取宽度差计算浏览器的滚动条的宽度时overflow: hidden设置和overflow: scroll设置。 宽度的差异将是滚动条的大小。

这是一个simple example显示你如何做到这一点。

Answer 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'); 

希望它能帮助。

Answer 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; 
}); 

它做什么：

当您的页面“准备就绪”或调整大小时，函数将计算正确的窗口高度和宽度（包括滚动条）。

Answer 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; 
     } 

Answer 6

退房VW：http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

body { 
    width: 100vw; 
} 

http://caniuse.com/#search=vw

Answer 7

目前新大众和VH css3属性将显示全尺寸，包括滚动条。

body { width:100vw; height:100vh; }

有一些讨论，网上，如果这是一个错误或没有。

Answer 8

滚动条所以“窗口其余部分”是什么？

但是，有一种方法可以做到另一种包装div，在一切正常的身体上，身体上有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; 
} 

Answer 9

这是我去掉“滚动条阴影”的解决方案，因为scrollWidth没有工作对我来说：

canvas.width = element.offsetWidth; 
canvas.height = element.offsetHeight; 
canvas.width = element.offsetWidth; 
canvas.height = element.offsetHeight; 

这很容易，但它的工作原理。请务必添加注释，解释为什么您分配两次相同的值:)