JavaScript获取窗口加滚动大小

JavaScript Get Window Plus Scroll Size

本文关键字：滚动 获取 窗口 JavaScript      更新时间：2023-09-26

我创建了一个带有重新调整侦听器大小的JavaScript覆盖函数。除了有卷轴的时候，一切都正常。假设屏幕是1024x768，但网站的内容占用1500x700，所以只有垂直滚动。哪个JavaScript函数可以检测滚动量，以便覆盖它？因为现在JavaScript检测到1024x768，当我滚动时，覆盖会停止。（如果主体背景为白色，覆盖层为黑色，则1024像素显示为黑色，但其余476px显示为白色。）以下是我的代码，我已将其缩减为相关部分。在解决了这个问题之后，任何关于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;
 }

您可以使用CSS来固定覆盖的位置：

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

前面建议的位置固定选项可能也是我要走的路线，但如果您希望覆盖中的图像随页面滚动，您可以更改getWindowSize（）函数，以获取围绕内容的包装div的维度，而不是窗口维度。

相关文章：