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.

Answer 1

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