如何在 Angular 中使用机车滚动

问题描述

有没有办法以角度使用机车滚动。我在谷歌上没有找到任何关于这个的信息。有人用过角度机车卷轴吗？

我尝试在 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>

提前致谢。

杰瑞米。

解决方法

Locomotive Scroll 必须知道您的内容高度才能正常工作。要解决此问题，请在呈现或更改内容时调用 Locomotive Scroll 的 update 方法。这可以通过使用 Locomotive Scroll 的 .update() 函数来完成。

如本教程所述，您可以使用调整大小观察器来自动执行更新函数调用：https://flo-lech.medium.com/using-locomotive-scroll-with-angular-a5e9049233dd

,

您的问题是 strict 属性。

修复 tsconfig.json

将tsconfing.json文件中的strict属性设置为false

 "strict": false

这对我有用！