主机侦听器滚动事件未触发

Question

我的主要目标是当用户向下滚动时，我需要获取当前的scrollTop偏移量。用户可以通过鼠标单击滚动条或鼠标滚轮滚动，因此当用户这样做时，我想更新ejQuery()上的take()和skip()(或page())参数以触发 http get 并为该视图提供数据。

使用 SyncFusion 1

下面的代码是我尝试向ejTreeGrid分配一个指令，该指令通过HostListener()监视scroll事件，但正如用户 PierreDuc 所提到的，ejTreeGrid实现了它的自定义滚动条，因此默认不会触发。PierreDuc 建议使用getScrollTopOffset方法，但我仍然需要在每次用户执行滚动操作时触发它......

---

一个指令被附加到SyncFusion的ejTreeGrid组件以监视scroll事件，但它没有触发。click事件一切都很好 - 在该子组件上触发。可能出了什么问题？

试：

@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)
}

这有效：

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

更新：

还添加了：

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

由于某种原因，只有mousewheel被触发，并且只有当我滚动鼠标滚轮(显然)时，但只有当滚动条位于顶部或底部时。否则它不会触发。

Answer 1

下面是工作代码：

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

请在此处查看演示

Answer 2

就我而言，由于我的身体元素style，@HostListener('window:scroll')不起作用。

它看起来像这样：

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

删除该style后，@HostListener工作正常。

注意：因此，如果您的@HostListener无法正常工作，请重新检查您的style。确保那里没有问题。

Answer 3

在启用了虚拟化模式的 TreeGrid 中，操作完成将使用参数 requestType 作为滚动操作触发。在这种情况下，我们可以从滚动条实例中获取当前的滚动顶部位置。若要启用虚拟化模式，我们必须将启用虚拟化属性设置为 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>

我们还准备了一个样品供您参考，请从链接中找到样品样品

Answer 4

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

或：

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

Answer 5

ejTreeGrid使用自定义滚动条实现。这意味着没有从该元素触发的本机滚动事件。也许您可以使用 ejTreeGrid 实例上的getScrollTopOffset方法做您想做的事。

否则，您可以要求同步功能，这些功能会在滚动时发出自定义事件

仅供参考

若要捕获鼠标滚轮事件，应使用wheel事件