1

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?

1 respuesta 1

1

perri intenta asi, en angular.json tenes que tener en la prop scripts:["path a myScript.js"] , luego encapsula tu script de js en una función:

let myScript = function(){
  console.log("hola desde myScript ;)");
  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");
        }
    }
  }
}

luego en el component vas a crear un declare var para hacer referencia a la lib que incluiste :

import { Component, OnInit } from '@angular/core';

declare var myScript: any;

@Component({
  selector: 'example-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  instanceLib: any;
  constructor(){

  }

  ngOnInit(): void {
    console.log("hola");
    this.instanceLib = myScript();
    this.instanceLib.mostrarScroll(); 
  }

}

en el OnInit, creas una instancia de la funcion y listo!

4
  • Estuve revisando tu respuesta, y en el onInit() me da un error cuando quiero acceder a la función mostrarScroll(), lo demás si me funciona bien, si me muestra los console.log, solo me da error en esa parte de acceder a la función mostrarScroll() Commented el 21 jul. 2020 a las 5:05
  • myScript debería tener un return { mostrarScroll: mostrarScroll }
    – Triby
    Commented el 21 jul. 2020 a las 16:00
  • @Triby faltaba ese return, muchas gracias :D Commented el 21 jul. 2020 a las 18:55
  • 1
    @altoqueperro También agregué esta linea window.addEventListener('scroll', mostrarScroll); antes del return { mostrarScroll: mostrarScroll } y con eso ya me funcionó las animaciones al hacer scroll. En verdad, muchas gracias :D Commented el 21 jul. 2020 a las 18:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.