Hostlistener scroll event not firing

Question

My main goal is when user scrolls down, I need to get the current scrollTop offset. And user can scroll with mouse click on scroll bar or with mousewheel, so when user does that I want to update take() and skip() (or page()) parameters on ejQuery() to fire http get and provide data for that view.

Using SyncFusion 1

The bellow code was my try to assign a directive to ejTreeGrid that watches scroll event via HostListener(), but as user PierreDuc mentioned, ejTreeGrid implements it's custom scroller , so default one doesn't trigger. PierreDuc advised to use getScrollTopOffset method, but I still need to fire it everytime a user performs a scroll action...

A directive is being attached to SyncFusion's ejTreeGrid component to watch scroll event, but it doesn't fire. All is fine with click event - fires on that child component. What might be wrong?

Tried:

@HostListener('scrollY', ['$event'])
onScroll(e) {
    console.log(e)
}
@HostListener('onscroll', ['$event'])
onScroll2(e) {
    console.log(e)
}
@HostListener('scroll', ['$event'])
onScroll3(e) {
    console.log(e)
}

@HostListener('scrollX', ['$event'])
onScroll4(e) {
    console.log(e)
}

This works:

@HostListener('click', ['$event'])
onClick(e) {
    console.log('clicked')
    console.log(e)

}

Update:

Also added:

@HostListener('mousewheel', ['$event'])
onScroll5(e) {
    console.log('mousewheel')
}

@HostListener('DOMMouseScroll', ['$event'])
onScroll6(e) {
    console.log('DOMMouseScroll')
}

@HostListener('onmousewheel', ['$event'])
onScroll7(e) {
    console.log('onmousewheel')
}

and for some reason only mousewheel being fired and only when I scroll mouse wheel (obviously) but only then when scrollbar is at the top or at the bottom. Otherwise it doesn't fire.

Vishal Biradar · Answer 1 · 2018-05-08T10:48:18.713

9

Below is the working code:

@HostListener('document:mousewheel', ['$event'])
onDocumentMousewheelEvent(event) {
    console.log('on Mouse wheel Event');
}

Please Check Demo Here

edited May 08 '18 at 10:48

answered May 08 '18 at 10:24

Vishal Biradar

1,219
2
12
24

means I didn't understand ?? You want an event to be triggered by the movement of mouse wheel right ?? – Vishal Biradar May 08 '18 at 10:49

score 4 · Answer 2 · answered Jul 02 '21 at 05:43

In my case, the @HostListener('window:scroll') is not working because style of my body element.

It's looks like this:

body {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

After I remove that style, the @HostListener working fine.

Note: So if your @HostListener not working, please recheck your style too. Make sure there's no something wrong in there.

score 2 · Accepted Answer · edited Sep 30 '21 at 21:38

In TreeGrid with virtualization enabled mode actionComplete will be triggered with an argument requestType as scroll on scroll action. In this event, we can get the current scroll top position from the scrollbar instances. To enable virtualization mode, we have to set enableVirtualization property as true.

<pre>
//app.component.html 
ej-treegrid #TreeGridControl id="TreeGridContainer" 
//… 
enableVirtualization = "true" (actionComplete) = "actionComplete($event)" > 
/ej-treegrid> 

//app.component.ts 
actionComplete(args){           
          if(args.requestType == "scroll"){ 
            var treeObj = this.treeGrid.widget; 
            var scrollTop = treeObj.getScrollElement().ejScroller("scrollTop"); 
            this.scrollValue = scrollTop; 
          }
        } 
 </pre>

We have also prepared a sample for your reference, please find the sample from the link Sample

score 2 · Answer 4 · answered May 12 '19 at 10:26

@HostListener('document:scroll', ['$event'])
onScroll(event) {
 console.log(event.target)
}

OR:

@Component({
  selector: 'scroll',
  templateUrl: './scroll.component.html',
  styleUrls: ['./scroll.component.scss'],
  host:{
    '(document:scroll)':'onScroll($event)'
  }
})

score 1 · Answer 5 · answered May 08 '18 at 09:04

1

ejTreeGrid uses a custom scrollbar implementation. Which means there is no native scroll event being fired from that element. Perhaps you can do what you want with the getScrollTopOffset method on the ejTreeGrid instance.

Otherwise you can ask syncfusion for a feature that they emit a custom event on scrolling

fyi

To capture the mousewheel event you should use the wheel event

answered May 08 '18 at 09:04

Poul Kruijt

69,713
12
145
149

Thanks, my main goal is user scrolls down, get the current scrollTop offset. And user can scroll with mouse click on scroll bar or with mousewheel. And when user does that I want to fire http get to provide data for that view. I know there is such `enableVirtualization`, but I failed to use it as data is being provided as `ejDataManager` with `url` and `headers` props and this object later is used as `dataSource`. So my plan is to get top offset and use on query `limit()` and `skip()` methods. How can I fire that `getScrollTopOffset` every time user perform scroll? Thanks in advance – Julius Dzidzevičius May 08 '18 at 10:03
And `wheel` event also fires only if scroll bar is at the top and I scroll up / or if scroll bar is at the bottom and I scroll down (so `deltaY` is always -100 or 100)... – Julius Dzidzevičius May 08 '18 at 10:08
Could you please check this - https://stackoverflow.com/questions/50233942/syncfusion-ejtreegrid-remove-scrollbar Many thanks – Julius Dzidzevičius May 08 '18 at 16:57

Hostlistener scroll event not firing

5 Answers5