同步两个滚动条在Angular中

huangapple go评论63阅读模式
英文:

Sync two scroll bars in Angular

问题

I’m trying to synchronize two scroll bars:

My code

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:

My code

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

&lt;div style=&quot;overflow: auto&quot; (scroll)=&quot;updateScroll()&quot; #scrollOne&gt;
  &lt;div style=&quot;width: 1300px; border: 1px solid red; height: 230px&quot;&gt;Scroll bar One&lt;/div&gt;
&lt;/div&gt;

&lt;div style=&quot;overflow: auto&quot;  #scrollTwo &gt;
  &lt;div style=&quot;width: 1300px; border: 1px solid red; height: 230px&quot;&gt;Scroll bar Two&lt;/div&gt;
&lt;/div&gt;

TS FILE

@ViewChild(&#39;scrollOne&#39;) scrollOne: ElementRef;
@ViewChild(&#39;scrollTwo&#39;) 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)=&quot;updateScroll(scrollOne,scrollTwo)&quot; on scrollOne, and (scroll)=&quot;updateScroll(scrollTwo,scrollOne)&quot; 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.

huangapple
  • 本文由 发表于 2023年5月7日 05:04:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/76191134.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定