Angular2-无法检测到滚动事件

本文介绍了Angular2-无法检测到滚动事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试向下滚动时修复div；为此，我从下面的代码开始，我遇到了一个奇怪的问题，该问题使我无法检测滚动行为.在下面的代码中，向下滚动时不会打印 console.log('大于50').

I'm trying to fix a div when scrolling down; for that, I began with the below code, I am facing some weird issue that prevents me from detecting the scrolling behavior. On the below code console.log('bigger than 50') does not get printed when scrolling down.

我为什么无法检测到滚动事件的任何想法?

Any ideas why I can't detect the scroll event?

@Component({
templateUrl: 'outlet.html',
selector: "app-layout-nav"
})


export class place {


  constructor(@Inject(DOCUMENT) private document: Document) {}

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

  onWindowScroll() {
    let number = this.document.body.scrollTop;
    if (number > 50) {
    console.log('bigger than 50')
    this.navIsFixed = true;
   } else if (this.navIsFixed && number < 10) {
      console.log('lower than 50')
      this.navIsFixed = false;
    }
  }

}

Outlet.html

 <div>

 <div id="wrap" [class.fixed]="navIsFixed">
  This should be fixed when it reaches a certain level</div>

  <div>The rest of the long page should show here</div>

 </div>

推荐答案

这可能有助于您检测元素或窗口上的滚动事件 https://github.com/anasAsh/ngx-scroll-event

this might help you to detect scroll events on an element or on windowhttps://github.com/anasAsh/ngx-scroll-event

使用NPM npm install ngx-scroll-event --save

有纱 yarn add ngx-scroll-event

导入ScrollEvent并将其添加到模块的imports数组中.

Import ScrollEvent and add it to the imports array of your module.

// app.module.ts
import { ScrollEventModule } from 'ngx-scroll-event';

@NgModule({
  imports: [
    ...,
    ScrollEventModule,
    ...,
  ]
})
export class AppModule { }

您现在可以在模板中将 detect-scroll 属性和(onScroll)事件添加到任何元素.您还可以添加 [bottomOffest] 来更改到达底部的警报为true时的值，默认值为100，该值应该是一个以像素为单位的数字.

In your template you may now add the detect-scroll attribute and (onScroll) event to any element.you can also add [bottomOffest] to change when reaching bottom is alert is true, defaults to 100, the value should be a number in pixels.

// app.awesome.component.ts

...
import { ScrollEvent } from 'ngx-scroll-event';
...

@Component({
   ...
   template: `...
        <div detect-scroll (onScroll)="handleScroll($event)" [bottomOffest]="200">
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
        <div>
   ...`,
})
export class AwesomeComponent {
  public handleScroll(event: ScrollEvent) {
    console.log('scroll occurred', event.originalEvent);
    if (event.isReachingBottom) {
      console.log(`the user is reaching the bottom`);
    }
    if (event.isWindowEvent) {
      console.log(`This event is hapening on Window not on an element.`);
    }

  }
}

这篇关于Angular2-无法检测到滚动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

onscroll