当内容绝对放置在屏幕外时，如何检查多个DIV

Question

我试图通过检查项目是否在视口内的滑块来添加样式，这效果很好，直到我使用left：-500px将parent parent parent parent parent parent parent parter容器的定位;例如。

这是我最初试图使用的代码。

document.addEventListener("DOMContentLoaded", function() {
var customSlides = document.getElementsByClassName("slide");
function checkForScroll(){
    var customVisibleFraction = 0.75;
    for(var i = 0; i < customSlides.length; i++) {
      var customSlide = customSlides[i];
      var csX = customSlide.offsetLeft, csY = customSlide.offsetTop, csW = customSlide.offsetWidth, csH = customSlide.offsetHeight, csR = csX + csW, //right
          csB = csY + csH, //bottom
          visibleX, visibleY, visible;

      visibleX = Math.max(0, Math.min(csW, window.pageXOffset + window.innerWidth - csX, csR - window.pageXOffset));
      visibleY = Math.max(0, Math.min(csH, window.pageYOffset + window.innerHeight - csY, csB - window.pageYOffset));
      visible = visibleX * visibleY / (csW * csH);
        if (visible > customVisibleFraction) {
            customSlide.style.opacity = '1';
        } else {
            customSlide.style.opacity = '0.5';
        }
    }
}
window.addEventListener('scroll', checkForScroll, false);
window.addEventListener('resize', checkForScroll, false);
});

最初，这起作用很棒，左侧和右侧divs在从寡妇中滚出时都具有不透明的变化，但是一旦我绝对位置所有这些div元素的容器，脚本的所有这些div元素的容器都会停止工作，如以下codepen中所示：

https://codepen.io/digitaldesigner/pen/pen/pen/bgamrrg

“ https://codepen.io/digitaldesigner/pen/bgamrrg 我试图与使用这种绝对定位的滑块，因此正在寻找一种使这项工作的方法。

在使用-LEFT绝对定位时，如何使此脚本正常运行？ 我想坚持使用JavaScript，并避免使用jQuery。

Answer 1

正确的方法是使用 ：

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

替换为：

function checkForScroll(){
  for(var i = 0; i < customSlides.length; i++) {
    const customSlide = customSlides[i];
    const customSlidePos = customSlide.getBoundingClientRect();
    if (customSlidePos.x > 0 && customSlidePos.y > 0 && customSlidePos.x < window.innerWidth && customSlidePos.y < window.innerHeight) {
        customSlide.style.opacity = '1';
    } else {
        customSlide.style.opacity = '0.5';
    }
  }
}