Angular 4实现两个独立元素同步滚动的方案咨询

当然可以实现！在Angular里完全不用依赖jQuery，用原生API就能轻松搞定两个独立元素的左右同步滚动，下面给你详细的实现方案：

1. 模板与样式准备 #

先在HTML里给两个需要同步的元素加上模板引用变量，方便组件类获取DOM，同时给滚动源元素绑定scroll事件：

<!-- 滚动源元素 -->
<div #scrollSource class="scroll-box">
  <div class="wide-content">这里放足够长的横向内容，确保元素能左右滚动...</div>
</div>

<!-- 需要同步的目标元素 -->
<div #scrollTarget class="scroll-box">
  <div class="wide-content">对应目标元素的内容，可以和源元素内容不同，只要滚动同步即可...</div>
</div>

再添加基础CSS让元素具备滚动能力：

.scroll-box {
  width: 400px;
  height: 200px;
  overflow-x: auto;
  border: 1px solid #eee;
  margin: 15px 0;
}

.wide-content {
  width: 1200px;
  height: 100%;
}

2. 组件类核心逻辑 #

使用Angular的@ViewChild获取DOM元素引用，监听滚动事件并同步scrollLeft值：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  // 获取两个滚动元素的DOM引用
  @ViewChild('scrollSource') scrollSource!: ElementRef<HTMLDivElement>;
  @ViewChild('scrollTarget') scrollTarget!: ElementRef<HTMLDivElement>;

  ngAfterViewInit(): void {
    // 监听源元素的滚动事件，同步scrollLeft到目标元素
    this.scrollSource.nativeElement.addEventListener('scroll', () => {
      this.scrollTarget.nativeElement.scrollLeft = this.scrollSource.nativeElement.scrollLeft;
    });

    // 如果需要双向同步（滚动目标元素时源元素也跟着动），就再加这段监听
    this.scrollTarget.nativeElement.addEventListener('scroll', () => {
      this.scrollSource.nativeElement.scrollLeft = this.scrollTarget.nativeElement.scrollLeft;
    });
  }
}

3. 响应式风格优化（可选） #

如果想更贴合Angular的响应式理念，可以用RxJS来管理滚动事件，避免手动操作DOM监听，还能自动处理内存泄漏：

import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import { fromEvent, Subscription } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit, OnDestroy {
  @ViewChild('scrollSource') scrollSource!: ElementRef<HTMLDivElement>;
  @ViewChild('scrollTarget') scrollTarget!: ElementRef<HTMLDivElement>;

  private scrollSubs: Subscription[] = [];

  ngAfterViewInit(): void {
    // 监听源元素滚动
    const sourceScroll$ = fromEvent(this.scrollSource.nativeElement, 'scroll');
    this.scrollSubs.push(
      sourceScroll$.subscribe(() => {
        this.scrollTarget.nativeElement.scrollLeft = this.scrollSource.nativeElement.scrollLeft;
      })
    );

    // 双向同步的目标元素监听
    const targetScroll$ = fromEvent(this.scrollTarget.nativeElement, 'scroll');
    this.scrollSubs.push(
      targetScroll$.subscribe(() => {
        this.scrollSource.nativeElement.scrollLeft = this.scrollTarget.nativeElement.scrollLeft;
      })
    );
  }

  ngOnDestroy(): void {
    // 销毁所有订阅，防止内存泄漏
    this.scrollSubs.forEach(sub => sub.unsubscribe());
  }
}

几点关键说明 #

• 两个元素完全独立，各自的内容、样式、尺寸都可以自定义，只是通过scrollLeft值的同步实现滚动联动。
• 全程用Angular原生API和浏览器原生DOM操作，没有引入jQuery，性能更优也更符合Angular的开发规范。
• 如果只需要单向同步（比如只有源元素滚动时带动目标元素），删掉目标元素的监听代码即可。

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