Question

I created a JavaScript overlay function with a re-size listener. Everything works except when there’s a scroll. Lets say the screen is 1024×768 but the website’s content takes up 1500×700, so there’s only a vertical scroll. Which JavaScript function can detect the amount of scroll so it can be covered by the overlay? Because right now JavaScript detects 1024×768 and when I scroll, the overlay stops. (If the body background is white and over overlay is black, it’ll display black for 1024 but for the remaining 476px, white is displayed.) Below is my code, I’ve cut it down to the relevant sections. After that has been solved, any tips for IE support would be appreciated. So far it doesn’t render correctly in 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

You could use CSS to fix the position of the overlay:

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