ウィンドウの幅を検出し、スクロールバーを補正する - JavaScript

StackOverflow https://stackoverflow.com/questions/596072

  •  09-09-2019
  •  | 
  •  

質問

Javascript を使用してユーザーのウィンドウの幅を検出し、スクロールバーを考慮するにはどうすればよいですか?(スクロールバーの内側の画面の幅が必要です)。これが私が持っているものです...複数のブラウザで動作するようです...スクロールバーを考慮していないことを除いて...

    function browserWidth() {
  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && document.documentElement.clientWidth ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && document.body.clientWidth ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
  }
  return myWidth;
}

何か案は？すべてのブラウザで動作する必要があります;)

役に立ちましたか？

解決

あなたは性質がquirksmodeでこのページにをブラウザ上でどのようなサポートされているものの大要約を見つけるでしょう。 ORGする。

（サポートされている、またはのdocument.getElementByIdまたは何がどこdocument.bodyを使用して）、その要素のclientWidthとclientHeight調べる最上位の要素を見つけるためにそのoffsetParentのチェーンを歩く

あなたの最善の策は、ページ内の要素をつかむために、おそらくです。

他のヒント

Aあなたは幅だけ興味があるなら（著しく厄介な）問題を回避するには、1ピクセル×100％のdiv要素を作成し、そのoffsetWidthを使用することです。 IE> = 7、FF、クロム、Safariやオペラ作品我々が作業しているとして（私は、IE6を試していませんでしたyou're - ラッキー - それは、作品・アット・オールSO-、ドント文句を言いますこれらの日その付近 - 約レンダリング-奇妙ポリシー）。私はそれをそれが必要なのは最初の時間を作成、属性{ position: 'absolute', top: '-1px', left: 0, width: '100%', height: '1px' }とdocument.bodyオフのdivを掛けます。

あなたはそれを我慢できるかどうか

作品ます。

ジャストwindow.innerWidth（）チェックの前にあることを追加 

if (typeof(document.body.clientWidth) == 'number') {
    // newest gen browsers
    width = document.body.clientWidth;
    height = document.body.clientHeight;
}

これは私がやったことです - JavaScript を学び始めてまだ半年なので、これは悪い修正かもしれません。まず、透明な正方形の画像を作成しました (10px x 10px), 、ただし、不透明な画像を作成し、これを JavaScript に次のように追加することもできます。
document.getElementById('getDimensions').style.visibility = "hidden";

HTML:

<img id="getDimensions" src="images/aSmallBox.png" alt="A small transparent image  
meant to determine the dimensions of the viewport" width="10px" height="10px"/>

JavaScript:

//Inside function called by window.onload event handler (could go in CSS file, but   
//better to keep it with other related code in JS file)
document.getElementById('getDimensions').style.position = "fixed";
document.getElementById('getDimensions').style.bottom = "0px";
document.getElementById('getDimensions').style.right = "0px";   

//Everything below inside function called by window.onresize event handler
var baseWidthCalculation = document.getElementById('getDimensions').offsetLeft;
var baseHeightCalculation = document.getElementById('getDimensions').offsetTop;
  //Account for the dimensions of the square img element (10x10)
var viewportWidth = baseWidthCalculation + 10;
var viewportHeight = baseHeightCalculation + 10;

これは、ティム・サライ（ちょうど始めているにもかかわらず、それはそのような右下隅に要素を配置することが素晴らしかった）。

により、ここに掲載のアイデアのより効率的なバージョンがあります 
var getDimensions = document.createElement("div");
getDimensions.setAttribute("style", 
            "visibility:hidden;position:fixed;bottom:0px;right:0px;");
document.getElementsByTagName("body")[0].appendChild(getDimensions);
var viewportWidth = getDimensions.offsetLeft;
var viewportHeight = getDimensions.offsetTop;

そして、ここではモジュールのバージョンです。

var PageDimensions = function(){
 var Width;
 var Height;     

 function pagedimensionsCtor (){
   var getDimensions = document.createElement("div");
   getDimensions.setAttribute("style" , 
         "visibility:hidden;position:fixed;bottom:0px;right:0px;");
   document.getElementsByTagName("body")[0].appendChild(getDimensions);
   Width = getDimensions.offsetLeft;
   Height = getDimensions.offsetTop;
   getDimensions.parentNode.removeChild(getDimensions);
 }
 pagedimensionsCtor();

 function Reset(){
  pagedimensionsCtor();
 }     

 function GetPageHeight(){
  return Height;
 }

 function GetPageWidth(){
  return Width;
 }

 return{
  Reset: Reset,
  GetPageHeight: GetPageHeight,
  GetPageWidth: GetPageWidth
 };
}

モジュラーバージョンを使用します：

var page = new PageDimensions();
console.log("viewportWidth: " + page.GetPageWidth() + " viewportHeight: " + page.GetPageHeight());

ボーナス機能：

page.Reset();//just in case you think your dimensions have changed

私は体の幅に「はinnerWidth」を比較します。ボディ幅>はinnerWidth場合は、スクロールバーが存在している。

if (browserWidth() < document.body.offsetWidth) {
  doSomething();
}

あなたが試すことができます別の解決策は、いくつかのCSSを変更しているので、スクロールが代わりにそれをやってブラウザウィンドウの、あなたのページ内に起こります。オート：身体のスタイルでは、オーバーフローを追加します。今body要素を使用すると、ウィンドウの幅を取得するときに、あなたが代わりに内部のスクロールコンテナ外の幅を測定している、スクロールバーが含まれます。

このはquirkinessの潜在的な供給源、そしておそらく、アクセシビリティの問題のように感じるんので、あなたは、広く使用のためのつもりなら、あなたは非常に慎重にそれをテストしたい場合があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top