Angular2 - Can't detect scrolling events

Question

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>

You need to listen on the div that scrolls, not on window. window:scroll is only for when the whole page is scrolled. We would need to see the HTML to and a pointer to the element that is supposed to scroll. — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 22, 2017 at 13:49
@GünterZöchbauer, I've posted the rest of code. Basically, I believe that it should be window:scroll as the user should scroll the window, and a particular div on that window will be fixed after reaching a certain level of scrolling. Please correct me if I am wrong. — Hamza L.
– Hamza L., Commented Apr 22, 2017 at 13:58
I can't know if you're wrong :D. If you say this is what should happen, then this is probably true. If the page is scrolling, then your @HostListener() should capture the scroll events, if it doesn't then not. — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 22, 2017 at 13:59
The problem is that @HostListener() does not capture the scroll events — Hamza L.
– Hamza L., Commented Apr 22, 2017 at 14:01
I don't see a way to diagnose it from the code you posted. Can you create Plunker that reproduces the problem? — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 22, 2017 at 14:02

Anas Al Hamdan · Accepted Answer · 2017-07-31 08:19:15Z

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

Install

With NPM npm install ngx-scroll-event --save
With Yarn yarn add ngx-scroll-event

Usage

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 { }

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.`);
    }

  }
}

BogdanC · Accepted Answer · 2017-07-28 16:25:10Z

2

You can bind the scroll event to your container:

<div class="container" (scroll)="onScroll($event)">
  <div class="scrollable_content">
  </div>
</div>

Then, on your component:

onScroll(event){
  const scrollTop = event.path[0].scrollTop;
}

answered Jul 28, 2017 at 16:25

BogdanC

2,7942 gold badges26 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular2 - Can't detect scrolling events

2 Answers 2

Install

Usage

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Install

Usage

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related