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。

JavaScript获取Window Plus滚动大小

2 个答案: