Quiero que el cuadrado sea amarillo con cada desplazamiento hacia abajo y que el cuadrado sea verde con cada desplazamiento hacia arriba. Este fragmento funciona casi como yo quiero, porque lo que quiero sucede solo cuando el cuadrado ya no es completamente visible en la ventana gráfica. Me gustaría que el desplazamiento hacia abajo sea amarillo y el desplazamiento hacia arriba sea verde.
const square = document.querySelector('.square'); const squarePos = square.getBoundingClientRect().top; console.log(squarePos); window.addEventListener('scroll',mouse=>{ const scrollTop = window.scrollY; if (scrollTop >squarePos) { square.style.background = "yellow"; } else{ square.style.background = "green"; } }); .square{ width:100px; height:100px; position:relative; margin:0 auto; background:red; top:200px; } .content{ width:100vw; height:150vh; } <div class = 'square'></div> <div class = 'content'></div>Debe comparar su squarePos con la posición cuadrada anterior, no con el cliente y. Establezca la posición con let y actualice el valor después de cada devolución de llamada del detector de eventos.
const square = document.querySelector('.square'); let squarePos = square.getBoundingClientRect().top; window.addEventListener('scroll', mouse => { if (square.getBoundingClientRect().top > squarePos) { square.style.background = "yellow"; } else{ square.style.background = "green"; } squarePos = square.getBoundingClientRect().top; }); .square{ width:100px; height:100px; position:relative; margin:0 auto; background:red; top:200px; transition: background 200ms ease; } .content{ width:100vw; height:150vh; } <div class = 'square'></div> <div class = 'content'></div>¿Quizás algo como esto?
La idea es obtener la ubicación de desplazamiento anterior (y) y compararla con la ubicación de desplazamiento actual.
Si el anterior es más grande, se desplaza hacia arriba, de lo contrario, se desplaza hacia abajo.
const square = document.querySelector('.square'); const squarePos = square.getBoundingClientRect().top; let oldpos = 0; window.addEventListener('scroll', mouse => { const scrollTop = window.pageYOffset; if (scrollTop > oldpos) { square.style.background = "yellow"; } else { square.style.background = "green"; } oldpos = scrollTop }); .square { width: 100px; height: 100px; position: relative; margin: 0 auto; background: red; top: 200px; } .content { width: 100vw; height: 150vh; } <div class='square'></div> <div class='content'></div>