How to use jquery-scrollify only in one component in angular 7?

Question

I'm using jquery scrollify for angular 7 project. i have used this command to install the jquery-scrollify

npm i jquery-scrollify

and then added its path in angular.json

"node_modules/jquery-scrollify/jquery.scrollify.js",

and used this code in my first component

$.scrollify({
    section : ".sectionCommon",
    sectionName : "section-name",
    interstitialSection : "",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset : 0,
    scrollbars: false,
    standardScrollElements: false,
    setHeights: true,
    overflowScroll: true,
    updateHash: false,
    touchScroll:true,
    before:function() {},
    after:function() {},
    afterResize:function() {},
    afterRender:function() {}
});

and scrollify start showing its effect on that component but issue occurs when it start showing its impact on other components as well. Pages stop scrolling. I tried below code on other components but doesn't work

$.scrollify.disable();

or

$.scrollify.destroy();

Please show me the right way of adding jquery scrollify in angular 7

score 0 · Answer 1 · answered Oct 26 '19 at 02:49

First import and declare jquery in component

import * as jQuery from 'jquery';
declare var jQuery: any;

and ngAfterViewInit() function use jquery scrollify plugin.

  ngAfterViewInit() {
    jQuery.scrollify({
      section : "section",
      sectionName : "section-name",
      interstitialSection : "",
      easing: "easeOutExpo",
      scrollSpeed: 1100,
      offset : 0,
      scrollbars: true,
      standardScrollElements: "",
      setHeights: true,
      overflowScroll: true,
      updateHash: true,
      touchScroll:true,
      before:function() {},
      after:function() {},
      afterResize:function() {},
      afterRender:function() {}
    });
  }

How to use jquery-scrollify only in one component in angular 7?

1 Answers1