web-dev-qa-db-ja.com

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

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

何か案は？すべてのブラウザで動作するために必要です;）

javascriptscreenwidth
18
johnnietheblack

どのブラウザでどのプロパティがサポートされているかについての大きな要約があります quirksmode.orgのこのページ 。

最善の策は、おそらくページ内の要素を取得し（サポートされている場合はdocument.body、またはdocument.getElementByIdなどを使用）、offsetParentチェーンをたどって最上位の要素を見つけ、その要素のclientWidthとclientHeightを調べることです。

5
moonshadow

幅のみに関心がある場合の（著しく厄介な）回避策は、1px x 100％divを作成し、そのoffsetWidthを使用することです。 IE> = 7、FF、Chrome、Safari、およびOperaで動作します（IE6は試していないので、幸運なことに取り組んでいます。最近では、レンダリングについて不平を言うことはありません。ポリシー{ position: 'absolute', top: '-1px', left: 0, width: '100%', height: '1px' }を使用して、divをdocument.bodyにぶら下げ、初めて必要になったときに作成します。

お腹が空いたら効きます。

6
Pete Jordan

Window.innerWidth（）チェックの前にそれを追加するだけです：

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

これは私がしたことです-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;
_
3
Tim Salai

これは、Tim Salaiによってここに投稿されたアイデアのより効率的なバージョンです（まだ始めたばかりですが、そのように右下隅に要素を配置するのは素晴らしかったです）。

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
3
Travis J

「innerWidth」を体の幅と比較します。本体の幅>内側の幅の場合、スクロールバーが表示されます。

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

試すことができるもう1つの解決策は、CSSを変更して、ブラウザウィンドウではなく、ページ内でスクロールが行われるようにすることです。 bodyのスタイルで、overflow：autoを追加します。これで、body要素にスクロールバーが含まれるようになりました。ウィンドウの幅を取得すると、スクロールコンテナの内側ではなく、外側の幅を測定します。

これは、奇妙さの潜在的な原因であり、アクセシビリティの問題である可能性があると感じているため、広範囲に使用する場合は、慎重にテストすることをお勧めします。

0
Dylan McCall