Buen día, intento agregar un archivo Javascript a un proyecto de Angular.
Tengo un archivo llamado scroll.js
el cual tiene una función para cuando se haga scroll en la página, vayan apareciendo los elementos conforme vaya bajando el scroll. Hice las pruebas en una página con HTML y CSS y funciona perfectamente.
Este es mi código en Javascript (scroll.js
).
let animado = document.querySelectorAll(".animated");
function mostrarScroll() {
var scrollTop = document.documentElement.scrollTop;
for (var i = 0; i < animado.length; i++)
{
console.log(animado);
var alturaAnimado = animado[i].offsetTop;
if(alturaAnimado - 500 < scrollTop)
{
animado[i].style.opacity = 1;
animado[i].classList.add("fadeInLeft");
}
}
}
window.addEventListener('scroll', mostrarScroll);
En Angular he intentado importarlo en angular.json
en la parte de scripts:
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"src/scroll.js"
]
Y también en el componente donde se aplicará esa función:
import { Component, OnInit } from '@angular/core';
import "../../../assets/js/scroll";
Y ninguna de estas dos formas logro hacer que me funcione el scroll. Cabe mencionar que agregué un console.log
en scroll.js
para ver si Angular estaba reconociendo el .js
y si me muestra el mensaje en la consola.
Mi pregunta es ¿Estoy haciendo mal la importación del Javascript? O, ¿necesito realizar algo más?