Angular中两个滚动条双向同步失效问题求助

你的问题出在仅给第一个滚动条绑定了滚动事件，且同步逻辑只处理了从第一个到第二个的单向同步，同时没处理滚动事件循环触发的问题（设置scrollLeft会再次触发scroll事件，导致无限同步）。以下是修复方案：

修改HTML代码 #

给第二个滚动条也绑定滚动事件，并传递触发源标识：

<div style="overflow: auto" (scroll)="updateScroll('one')" #scrollOne>
  <div style="width: 1300px; border: 1px solid red; height: 230px">Scroll bar One</div>
</div>

<div style="overflow: auto" (scroll)="updateScroll('two')" #scrollTwo>
  <div style="width: 1300px; border: 1px solid red; height: 230px">Scroll bar Two</div>
</div>

修改TS代码 #

添加标志位防止循环触发，根据触发源实现双向同步：

import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  @ViewChild('scrollOne') scrollOne: ElementRef;
  @ViewChild('scrollTwo') scrollTwo: ElementRef;
  // 标志位：避免滚动事件循环触发
  private isSyncing = false;

  updateScroll(trigger: 'one' | 'two') {
    if (this.isSyncing) return;
    
    this.isSyncing = true;
    
    const scrollOneEl = this.scrollOne.nativeElement as HTMLElement;
    const scrollTwoEl = this.scrollTwo.nativeElement as HTMLElement;

    if (trigger === 'one') {
      // 从第一个滚动条同步到第二个
      scrollTwoEl.scrollLeft = scrollOneEl.scrollLeft;
      scrollTwoEl.scrollTop = scrollOneEl.scrollTop; // 如需同步垂直滚动可保留，不需要则删除
    } else {
      // 从第二个滚动条同步到第一个
      scrollOneEl.scrollLeft = scrollTwoEl.scrollLeft;
      scrollOneEl.scrollTop = scrollTwoEl.scrollTop; // 如需同步垂直滚动可保留，不需要则删除
    }

    // 延迟重置标志位，规避浏览器事件队列重复触发
    setTimeout(() => {
      this.isSyncing = false;
    }, 10);
  }
}

核心逻辑说明 #

• 两个滚动条都绑定scroll事件，通过trigger参数区分触发源，实现双向同步。
• isSyncing标志位用于拦截代码设置滚动位置时触发的重复事件，避免无限循环。
• 可选保留scrollTop同步逻辑，实现垂直滚动条的同步，不需要可直接删除对应代码。

内容的提问来源于stack exchange，提问作者designArg