英文:
Sync two scroll bars in Angular
问题
I’m trying to synchronize two scroll bars:
The sync it’s working when I scroll with the first scroll bar but not with the second scroll bar. How can I solve it? I'm running out of ideas. To use a library it's not an option for me.
HTML
<div style="overflow: auto" (scroll)="updateScroll()" #scrollOne>
<div style="width: 1300px; border: 1px solid red; height: 230px">Scroll bar One</div>
</div>
<div style="overflow: auto" #scrollTwo >
<div style="width: 1300px; border: 1px solid red; height: 230px">Scroll bar Two</div>
</div>
TS FILE
@ViewChild('scrollOne') scrollOne: ElementRef;
@ViewChild('scrollTwo') scrollTwo: ElementRef;
updateScroll(){
const scrollOne = this.scrollOne.nativeElement as HTMLElement;
const scrollTwo = this.scrollTwo.nativeElement as HTMLElement;
// do logic and set
scrollTwo.scrollLeft = scrollOne.scrollLeft;
}
英文:
I’m trying to synchronize two scroll bars:
The sync it’s working when I scroll with the first scroll bar but not with the second scroll bar. How can I solve it? I running out of ideas. To use a library it's not an option for me.
HTML
<div style="overflow: auto" (scroll)="updateScroll()" #scrollOne>
<div style="width: 1300px; border: 1px solid red; height: 230px">Scroll bar One</div>
</div>
<div style="overflow: auto" #scrollTwo >
<div style="width: 1300px; border: 1px solid red; height: 230px">Scroll bar Two</div>
</div>
TS FILE
@ViewChild('scrollOne') scrollOne: ElementRef;
@ViewChild('scrollTwo') scrollTwo: ElementRef;
updateScroll(){
const scrollOne = this.scrollOne.nativeElement as HTMLElement;
const scrollTwo = this.scrollTwo.nativeElement as HTMLElement;
// do logic and set
scrollTwo.scrollLeft = scrollOne.scrollLeft;
}
Thanks in advance
答案1
得分: 1
Here's the translated content:
由于您只想让非聚焦的滚动条的行为与聚焦的滚动条相同,您最初的想法是正确的:scrollTwo.scrollLeft = scrollOne.scrollLeft;
是一个不错的起点。这也意味着对于另一个滚动条(scrollTwo),您应该执行相同的操作。
然而,复制代码是不好的做法,实际上也不需要:您可以在两个滚动条上都调用相同的scroll
事件方法,以相反的顺序传递滚动条元素:
在scrollOne上使用(scroll)="updateScroll(scrollOne, scrollTwo)"
,在scrollTwo上使用(scroll)="updateScroll(scrollTwo, scrollOne)"
然后修改您的updateScroll
方法如下:
updateScroll(bar1: any, bar2: any) {
bar2.scrollLeft = bar1.scrollLeft;
}
不需要其他操作:滚动条已作为HTML元素传递,因此方法只需要处理顺序(哪个滚动条设置值,哪个接收它),这由调用者完成。
这里是stackblitz示例。
英文:
Since you just want that non-focused scrollbar behaves as the focused one, your initial idea is just fine: scrollTwo.scrollLeft = scrollOne.scrollLeft;
is a good start. That also means that for the other scrollbar (scrollTwo) you should do the same.
However, duplicating the code is bad practice and actually not needed: you can call the same method for scroll
event on both scrollbars, passing the scrollbar elements in opposite order:
(scroll)="updateScroll(scrollOne,scrollTwo)"
on scrollOne, and (scroll)="updateScroll(scrollTwo,scrollOne)"
on scrollTwo
And then modify your updateScroll
method to:
updateScroll(bar1: any, bar2: any) {
bar2.scrollLeft = bar1.scrollLeft;
}
Nothing else is needed: scrollbars are already passed as html elements so the method only needs to handle the order (which bar is setting the value and which one is receiving it), which is done by the callers.
Here's a stackblitz.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论