Question

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

使用SyncFusion 1

以下代码是我尝试通过 HostListener（）为 ejTreeGrid 分配指示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: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)'
  }
})

Answer 2

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

否则，您可以向syncfusion请求他们在滚动时发出自定义事件的功能

FYI

要捕获mousewheel事件，您应该使用wheel事件

Answer 3

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

我们还准备了一个示例供您参考，请从下面的链接Sample 中细化该示例，
如果您需要任何其他帮助，请告诉我们。

致谢

Syncfusion支持

Answer 4

以下是工作代码：

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

Please Check Demo Here

Answer 5

就我而言，@HostListener('window:scroll') 不起作用，因为我的 body 元素的 style。

看起来像这样：

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

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

注意：因此，如果您的 @HostListener 不起作用，也请重新检查您的 style。确保那里没有问题。

Hostlistener滚动事件未触发

5 个答案: