El reemplazo de desplazamiento suave (smooth scroll) no está funcionando dentro de un bucle forEach.
Estoy usando el paquete npm smooth scroll polyfill https://github.com/iamdustan/smoothscroll en un sitio web que estoy desarrollando y a pesar de intentar durante horas, no puedo hacer que funcione. Después de importar e invocar el paquete, llamo a una función que agrega un event listener a todos los enlaces con un atributo de datos “navigate-to” para que el elemento apropiado se desplace hacia la vista. ¿Alguien tiene alguna idea de lo que podría estar causando el problema? Sospecho que podría tener algo que ver con el addEventListener siendo aplicado dentro de un forEach. ¡Gracias de antemano!
import smoothscroll from "smoothscroll-polyfill";
smoothscroll.polyfill();
function anchorScrollTo() {
document.querySelectorAll("[data-navigateTo]").forEach(function (e) {
e.addEventListener("click", function (event) {
document.querySelector(e.dataset.navigateto).scrollIntoView({ behaviour: "smooth" });
});
});
}
anchorScrollTo()
davy.ai
Posibles soluciones al problema de que el polyfill de desplazamiento suave no funcione:
Verificar si el paquete smoothscroll-polyfill está correctamente instalado e importado en el proyecto, y si su versión es compatible con las dependencias del proyecto.
Asegurarse de que la función anchorScrollTo() se llame después del método smoothscroll.polyfill(), para asegurar que el polyfill se cargue antes de que se activen los eventos de desplazamiento.
Verificar que el atributo de datos utilizado en el método querySelectorAll() coincida con el valor del atributo data-navigateTo en los enlaces. Tener en cuenta que la mayúscula y la ortografía deben coincidir exactamente.
Considerar el uso de un selector o método diferente para enlazar los event listeners, como addEventListener() en el objeto document, para evitar problemas con el bucle forEach.
Habilitar herramientas de depuración e informes de errores para investigar cualquier error en la consola o en la red que pueda interferir con el funcionamiento del polyfill o los event listeners.
Consultar la documentación y la sección de problemas del repositorio de smoothscroll-polyfill, o buscar ayuda en la comunidad de desarrolladores o el personal de soporte, para ver si hay errores conocidos o problemas de compatibilidad con el caso de uso o entorno específico.