JavaScript Get Window Plus Scroll Size

Question

リサイズされたリスナーでJavaScriptオーバーレイ機能を作成しました。スクロールがある場合を除いてすべてが機能します。スクリーンは1024x768だが、ウェブサイトのコンテンツは1500x700だから、垂直スクロールしかない。どのJavaScript関数がスクロール量を検出してオーバーレイでカバーできるのか？今はJavaScriptが1024x768を検出し、スクロールするとオーバーレイが停止します。 （体の背景が白でオーバーレイが黒の場合は1024で黒が表示されますが、残りの476ピクセルでは白が表示されます）。以下は私のコードです。それが解決された後、IEのサポートのためのヒントをいただければ幸いです。これまでのところ、それはIE 8で正しく

//Index.html 
renderOverlay("image.jpg"); 


//Overlay.js 
renderOverlay(img){ 
    if(resizeListener){ //global variable 
    var overlay = document.createElement("div"); 
    overlay.className = "overlay"; //Contains overlay background color, positioning etc 
    overlay.id = "overlay"; 
    overlay.style.width = getWindowSize("width"); 
    overlay.style.height = getWindowSize("height"); 
    overlay.innerHTML = "<img src='"+file+"' />"; 

    document.appendChild(overlayWrapper); 
    window.addEventListener("resize", function(){renderOverlay(img)}, false); 
    }else{ 
    document.getElementById("overlay").style.width = getWindowSize("width"); 
    document.getElementById("overlay").style.height = getWindowSize("height"); 
    } 
} 


//getWindowSize.js 
getWindowSize(dimension){ 
    if(typeof(window.innerWidth) == "number"){ 
    if(dimension == "width"){ 
     return(window.innerWidth+"px"); 
    }else{ 
     return(window.innerHeight+"px"); 
    } 
    } 
} 

//CSS 
.overlay{ 
background: rgba(0, 0, 0, 0.8); 
left: 0; 
overflow: auto; 
position: fixed; 
text-align: center; 
top: 0; 
} 

Answer 1

をレンダリングしていないあなたは、オーバーレイの位置を固定するためにCSSを使用することができます。以前の提案

#overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

Answer 2

位置固定オプションは、おそらく私が希望ルートでありますもしあなたがページ上でスクロールするあなたのオーバーレイ内のイメージを望むならば、getWindowSize（）関数を変更してウィンドウディメンションではなく内容を囲むラッパーdivのディメンションをフェッチすることができます。