スクロールバーで確実に画面の幅を取得する方法

Question

ブラウザのビューポートの幅にスクロールバーを含むがブラウザウィンドウの残りの部分は含まないことを確実に伝える方法はありますか？プロパティの

なしあなたがoverflow: hiddenが設定されているとoverflow: scrollが設定されている場合、幅の違いを取得することにより、ブラウザのスクロールバーの幅を計算することができますjQueryを使って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

を表示されません。 幅の違いは、スクロールバーのサイズになります。ここで

は、あなたがこれを行うことができます方法を示している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

私は正確にいくつかのコードを使用してスクロールバーWITHビューポートの幅を取得する方法を考え出し：

：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

現在、新しいVWとVH css3プロパティはスクロールバーを含むフルサイズで表示されます。これはバグであるかどう

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

いくつかの議論がご来店中です。

Answer 8

スクロールバーだから「残りの窓」は何ですか？

しかし、そうする方法の1つは、すべてが行き渡る本体に別のラッパーdivを作成し、本体にoverflow:none; height:100%; width:100%;があり、ラッパーdivも100％の幅と高さです。オーバーフローしてスクロールします。 scrollWidthが機能しなかったので、これは、「スクロールバーの影」を除去するために私の解決策であるhttp://jsfiddle.net/techsin/8fvne9fz/

html,body { 
    height: 100%; 
    overflow: hidden; 
} 

.wrapper { 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
} 

Answer 9

：SO NOW ...ラッパーの幅がビューポートの幅

を参照してください例だろう私のために：

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

それは簡単だが、それは動作します。同じ値を2回割り当てた理由を説明するコメントを必ず追加してください:)