web-dev-qa-db-ja.com

@HostListenerを使用したウィンドウスクロールイベントが機能しない

Angular 4アプリケーションで、下にスクロールするときにスティッキーヘッダーを作成できません。スクロールイベントを検出できません。

ヘッダーはレイアウトコンポーネントに配置され、スクロールするコンテンツはルートコンポーネントに配置されます。それが問題なのでしょうか？

これは私が実装したコードです。

in 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">
angulartypescriptscrollheadersticky
6
tolceza

私は同じ問題を抱えていました、私がしなければならなかったすべては、コンポーネント要素が実際にスクロールしているものであることと、overflowプロパティにscrollまたはautoの値があることを確認することです。

そうでなければ、これはうまくいきました：

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

レイアウトが問題の原因である必要があります。 scrollイベントは、コンポーネントテンプレート要素が実際にスクロールできる場合にのみ機能します。私が作ったこれ stackblitz を見てください。 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

2
Vega

これはあなたにスクロールイベントを与えるはずです：

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

または

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