typescript 使用@HostListener的窗口滚动事件不起作用

iovurdzv 于 2023-04-22 发布在 TypeScript

关注(0)|答案(5)|浏览(228)

我在Angular 4应用程序中向下滚动时出现粘性标题问题。无法检测到滚动事件。
标题放在布局组件中，而我想滚动的内容放在路线组件中。这可能是问题所在吗？
这是我实现的代码。

layout.component.ts中

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

import { DOCUMENT } from "@angular/platform-browser";

@Component({

  selector: 'app-layout',

  templateUrl: './layout.component.html',

  styleUrls: ['./layout.component.css']
})

export class LayoutComponent implements OnInit {

  public navIsFixed: boolean = false;

  constructor(public router: Router, @Inject(DOCUMENT) private document: any) { }

  @HostListener('window:scroll', [ ])

    onWindowScroll(){
      const number = window.pageYOffset || 
      document.documentElement.scrollTop || 
      document.body.scrollTop || 0;
      if (number > 50) {
        this.navIsFixed = true;
      } else if (this.navIsFixed && number < 10) {
      this.navIsFixed = false;
      }
    }
}

在layout.component.html中

<div [class.fixed]="navIsFixed" class="header">

typescript

来源：https://stackoverflow.com/questions/45937867/window-scroll-event-using-hostlistener-not-working

5条答案

按热度按时间

t2a7ltrp1#

我也遇到了同样的问题，我所要做的就是确保组件元素实际上就是正在滚动的内容&它有一个值为scroll或auto的overflow属性。
否则就这样工作：

@HostListener('scroll')
  public asd(): void {
  console.log('scrolling');
}

赞(0）回复(0）举报 2023-04-22

j5fpnvbx2#

您的布局必须是问题的来源。只有当组件模板元素可以实际滚动时，滚动事件才起作用。
确保div的溢出属性设置为滚动。另外，更改div的尺寸，以便可以触发滚动。
为了使它工作，我建议将其设置为指令并设置为高度为100vh，宽度为100vw的div。

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({ selector: '[trackScroll]' })
export class TrackScrollDirective {
    constructor(private el: ElementRef) {
    }

    @HostListener('document:scroll', [])
    onScroll(): void {
         console.log('I am scrolled');
    }
}

看看我做的这个stackblitz。

赞(0）回复(0）举报 2023-04-22

hfwmuf9z3#

这将为您提供滚动事件：

@HostListener('scroll', ['$event'])
onScroll(event) {
  ...
}

或

<div (scroll)="onScroll($event)"

赞(0）回复(0）举报 2023-04-22

vwkv1x7d4#

我也有同样的问题，我把这个添加到“nav.component”：

@HostListener('window:scroll', [])
onWindowScroll() {
    console.log(window.scrollY);

    if (window.scrollY > 90) {
        this.isSticky = true;
    } else {
        this.isSticky = false;
    }
}

赞(0）回复(0）举报 2023-04-22

uoifb46i5#

无法使用scroll，但可以使用wheel：

@HostListener('window:wheel', ['$event'])
onWheel(event: MouseEvent) {
  // do what you want here
}

赞(0）回复(0）举报 2023-04-22

我来回答

typescript 使用@HostListener的窗口滚动事件不起作用

5条答案

相关问题

热门标签

最新问答