如何通過滾動條可靠地獲取屏幕寬度

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; 

這很容易，但它的工作原理。請務必添加註釋，解釋爲什麼您分配兩次相同的值:)