¿Es posible usar element.scrollIntoView y un detector de eventos de "desplazamiento" juntos?
Lo que quiero hacer con mi código es verificar si el usuario se desplazó por un determinado elemento, si es así, entonces la página debería desplazarse automáticamente sin problemas a la siguiente sección, para hacer esto, traté de usar un oyente de desplazamiento y element.scrollIntoView con comportamiento suave, y al hacerlo se genera un bucle que hace que el desplazamiento vaya muy despacio.
También traté de eliminar el oyente una vez que se ejecuta la función, pero eso no funciona porque necesito ejecutar constantemente esa misma función para verificar la posición de desplazamiento, probar con console.log me hizo ver que eliminar el oyente hace que se ejecute solo una vez.
Aquí está la función:
let scrollBox = document.getElementById("scrollbox") function onScroll(event){ window.removeEventListener("scroll", onScroll); elementTop = scrollBox.getBoundingClientRect().top; if(elementTop < 800 && elementTop > 600) { divStop.scrollIntoView({block: "end", behavior: "smooth"}); } event.preventDefault(); }; window.addEventListener("scroll", onScroll)Entonces, ¿cómo debo proceder? ¿Hay alguna manera de usar ambos juntos que me faltan? Si no, ¿cómo puedo completar mi objetivo/idea? Por favor ayuda.
Podrías usar un IntersectionObserver . Cada vez que se alcanza el elemento que observa, puede llamar al método scrollIntoView en el elemento al que desea ir. Luego puede dejar de ver el primer elemento si desea evitar que se repita una y otra vez.
const scrollBox = document.getElementById("scrollbox"); const divStop = document.getElementById("stop"); const scroller = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { divStop.scrollIntoView({ block: "end", behavior: "smooth" }); scroller.unobserve(scrollBox); } }); }); scroller.observe(scrollBox);