Estoy tratando de agregar estilo a un control deslizante al verificar si el elemento está dentro de la ventana gráfica, esto funciona muy bien hasta que coloco el contenedor principal de elementos fuera de la pantalla usando left: -500px; por ejemplo.
Aquí está el código que inicialmente estaba tratando de usar.
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); });Esto funciona muy bien inicialmente y los divs del lado izquierdo y derecho tienen el cambio de opacidad a medida que se desplazan fuera de la viuda; sin embargo, una vez que coloco el contenedor de todos estos elementos div a la izquierda, el script deja de funcionar como se ve en el código siguiente:
https://codepen.io/DigitalDesigner/pen/bGamRRG
Si elimino el posicionamiento absoluto, todo funciona como se esperaba, sin embargo, el control deslizante con el que estoy tratando de integrar usa este posicionamiento absoluto, por lo que busco una manera de hacer que esto funcione.
¿Cómo puedo hacer que este script funcione correctamente cuando uso el posicionamiento absoluto izquierdo? Me gustaría seguir con javascript y evitar jQuery también.
El enfoque correcto es usar element.getBoundingClientRect() :
var rect = element.getBoundingClientRect(); console.log(rect.top, rect.right, rect.bottom, rect.left);Reemplace con esto:
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'; } } }