Hostlistener 滚动事件未触发

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

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

否则你可以向 syncfusion 询问他们在滚动时发出自定义事件的功能

仅供参考

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

Answer 2

下面是工作代码：

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

Please Check Demo Here

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>

我们也准备了样例供大家参考，样例请到linkSample

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

在我的例子中，@HostListener('window:scroll') 不起作用，因为我的正文元素 style。

看起来像这样：

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

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

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

Hostlistener 滚动事件未触发

Hostlistener scroll event not firing

syncfusion

angular