Fatal编程技术网
  • rxjs/
  • Rxjs 在两个div上同步滚动事件的最佳方法

Rxjs 在两个div上同步滚动事件的最佳方法

rxjs

Rxjs 在两个div上同步滚动事件的最佳方法,rxjs,dom-events,scrollbar,Rxjs,Dom Events,Scrollbar,在Angular 10中工作时，我可以使用@HostListener捕获滚轮和滚动事件。然后我可以从控制盘事件中提取deltaY的值，并从nativeElement中提取scrollLeft。然后我可以滚动第二个div（这是我的场景中的要求） 但是，当我手动滚动第二个div时，scroll事件的问题是使滚动看起来更平滑 以下是项目工作流程（此处重点关注滚动事件）： 在本例中，我使用appScrollbar指令装饰child-a组件，该指令发出scroll事件 child-a函数scrollPo

在
Angular 10
中工作时，我可以使用
@HostListener
捕获
滚轮
和
滚动
事件。然后我可以从控制盘事件中提取
deltaY
的值，并从
nativeElement
中提取
scrollLeft
。然后我可以滚动第二个div（这是我的场景中的要求）

但是，当我手动滚动第二个div时，
scroll
事件的问题是使滚动看起来更平滑

以下是项目工作流程（此处重点关注
滚动
事件）：


    

  • 在本例中，我使用
    appScrollbar
    指令装饰
    child-a
    组件，该指令
    发出
    scroll
    事件
    • 

  • child-a
    函数
    scrollPositionEm
    然后调用
    appService
    函数，该函数对主题激发
    .next（）
    • 

  • child-b
    然后
    订阅可观察的
    • 

  • child-b
    然后抓取
    viewChild
    nativeElement.scrollBy（）
    • 




以下是我的direct中的一个片段：



@HostListener（'scroll'，['$event']）onScrollHost（事件：event）：void{
常量scrollAmount=（event.target作为元素）；
如果（此鼠标滚轮）{
//onscroll也捕获了轮子事件，因此只需返回即可。
this.mouseweel=false；
返回；
}
window.requestAnimationFrame（（）=>{
//根据MDN文档-建议限制该事件。
this.scrollPosition.emit（{scrollValue:scrollAmount，scrollMovement:'scrollTo'}）；
});
}