comment vérifier que plusieurs divs sont dans la fenêtre d'affichage lorsque le contenu est positionné hors écran de manière absolue

J'essaie d'ajouter un style à un curseur en vérifiant si l'élément se trouve dans la fenêtre d'affichage, cela fonctionne très bien jusqu'à ce que je positionne le conteneur parent des éléments hors écran en utilisant left:-500px; par exemple.

Voici le code que j'essayais initialement d'utiliser.

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);
});

Cela fonctionne très bien au départ et les divs gauche et droit ont l'opacité qui change lorsqu'ils défilent hors de la veuve, mais une fois que je positionne le conteneur de tous ces éléments div à gauche, le script cesse de fonctionner comme on le voit dans le codepen suivant:

https://codepen.io/DigitalDesigner/pen/bGamRRG

Si je supprime le positionnement absolu, tout fonctionne comme prévu, mais le curseur que j'essaie d'intégrer utilise ce positionnement absolu, je cherche donc un moyen de le faire fonctionner.

Comment puis-je faire fonctionner correctement ce script lors de l'utilisation du positionnement absolu -left ? Je voudrais m'en tenir à javascript et éviter également jQuery.

Solution du problème

L'approche correcte consiste à utiliser element.getBoundingClientRect():

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';
 }
 }
}