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, который окружает ваш контент, а не размеры окна.