How to use locomotive scroll in Angular

Question

Is there a way to use Locomotive scroll in angular. I didn't find anything about this on google. Has somebody ever use Locomotive scroll in angular?

I tried to import it in my homepage.component.ts :

import {Component, HostListener, OnInit} from '@angular/core';
import {AppComponent} from '../app.component';
import LocomotiveScroll from 'locomotive-scroll';


@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {
  scroll;

  constructor() {

  }

  @HostListener('window:load')
  initLocomotiveScroll() {
    this.scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      smooth: true,
    });
  }

}

homepage.componenet.html :

<div data-scroll-container style="height: 100%; overflow: scroll">
  <div data-scroll-section>
    <h1 data-scroll>Hey</h1>
    <p data-scroll></p>
  </div>
  <div data-scroll-section>
    <h2 data-scroll data-scroll-speed="1">What's up?</h2>
    <p data-scroll data-scroll-speed="2"></p>
  </div>
</div>

Thank's in advance.

Jérémy.

It's a library to create scroll effects : https://locomotivemtl.github.io/locomotive-scroll/ — Jérémy Gachon, Jan 24 '21 at 21:02
It's a simple js library. Why can't you just import it and use it as it is ? If you tried something that doesn't work please show us what you did — Amadou Beye, Jan 24 '21 at 21:07
Maybe create a small example (stackblitz or other) reproducing the issue — David, Feb 01 '21 at 17:51

score 0 · Answer 1 · answered Mar 22 '21 at 12:36

Locomotive Scroll has to know about your content height in order to work correct. To solve the issue, call the update method of Locomotive Scroll whenever your content is rendered or changed. This can be done by using Locomotive Scroll's .update() function.

As outlined in this tutorial you can use a resize observer to automate the update function call: https://flo-lech.medium.com/using-locomotive-scroll-with-angular-a5e9049233dd

score -2 · Answer 2 · answered Jan 27 '21 at 22:24

-2

Your problem is the strict attribute.

FIX tsconfig.json

Set the strict attribute in the tsconfing.json file to false

 "strict": false

This worked for me!

answered Jan 27 '21 at 22:24

Armando Resta

1
1

How to use locomotive scroll in Angular

2 Answers2