angular: Scroll event can't be detected on version 4
I’m submitting a … (check one with “x”)
[ X] bug report
[ ] feature request
[ ] support request
Current behavior Can’t detect scroll event on 4.0.2
Expected behavior Should be able to detect scroll event using…window:scroll, scroll on elements, hostlistener scroll, etc…
Minimal reproduction of the problem with instructions
<div (window:scroll)="increment()">some stuff here</div> <div (scroll)="increment()">some stuff here</div> etc... increment() { this.counter += 1;} **What is the motivation / use case for changing the behavior?** Can't do a infinite scroll or use one.Please tell us about your environment: Windows 10 Pro, webstorm, used angular cli to create the package,
- Angular version: 2.0.X
- Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Chrome
- Language: [ TypeScript 2.1 ]
“@angular/animations”: “^4.0.1”, “@angular/common”: “^4.0.1”, “@angular/compiler”: “^4.0.1”, “@angular/core”: “^4.0.1”, “@angular/forms”: “^4.0.1”, “@angular/http”: “^4.0.1”, “@angular/platform-browser”: “^4.0.1”, “@angular/platform-browser-dynamic”: “^4.0.1”, “@angular/router”: “^4.0.1”,
edit: plunker incoming edit2: worked around the issue, was pressed by time. I did not solve the issue and closed it because I didnt had the time to repro on a plunker.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 17 (3 by maintainers)
This still does not work for me either, im using version 5.
I have experienced the same issue with angular 5.1.2. And I am also using angular material, 5.0.2, with sidenav. This is definitely an issue.
@KKHAN1991 Confirmed! It is working without Angular 2 Material Sidemenu so what should we do ? to create an issue ?
iv tried to get a scroll event to work on div inside another scroll-able div
https://plnkr.co/edit/Ib0fxBIb7syGdEtQ1Rz4
event doesn’t fire.
A relevant comment is here: https://github.com/angular/angular/issues/17033#issuecomment-304296784 I was having trouble with the
(scroll)on a div until I realized it was a different div that was actually responsible for the scrolling behavior, and therefore the one that needed the listener. Now things are working fine for me after being careful to attach(scroll)to the relevant element.@muffinrecon thats intended functionality the styles are removed. ViewEncapsulation.Native should not be suggested as a solution here.
i found the source of my problem. First need to make sure you use window:scroll to detect changes in the window, “scroll” only detects changes on the element its applied on.
Trying to detect changing uses material sidenav is a headache, this is where i am having the problem. sidenav container has height of 100% and it causes the scrolling to not be detected for whatever reason.
Comment posted by gtzinos seems to fire the event, however all the styles are gone.
You should probably file a Plunker reproduction - my own experience with scroll events and Angular 4 does not agree with the asserted claim that it does not work.
@Radu-Dunarentu why did you close the issue? Is it solved? Thanks
@nekkon Plunker doesn’t work for me, but this should demonstrate how to make it work https://plnkr.co/edit/H9JBAbJhGzHRRCeakIQj?p=preview
Your original Plunker listens for scroll events on an element that doesn’t scroll. In you case
(window:scroll)="..."would work because in your example the window content is scrollling, not the<div>content where you added the(scroll)="..."event binding.