使用 Angular 7 同步水平滚动答案

【问题标题】：Synchronized horizontal scrolling using angular 7使用 Angular 7 同步水平滚动
【发布时间】：2020-06-11 04:18:35
【问题描述】：

你能帮我实现角度同步水平滚动吗？

以下链接是解决方案，但代码是用 jquery 编写的。

Synchronized scrolling using jQuery?

【问题讨论】：

第一个答案使用element.scrollTop，您可以使用@ViewChild()在Angular中实现它

标签： javascript angular

【解决方案1】：

这是源代码：http://trunk.xtf.dk/Project/ScrollSync/jquery.scrollSync.js

您只需将代码翻译成您的代码（例如使用本机打字稿或将 jquery 添加到您的项目中）。

现在我在 https://angular-apcjwt.stackblitz.io 创建一个示例，你给我几分钟时间来创建一个 Angular 应用示例。

我不建议使用 jquery，因为会增加构建预算。更好地使用 Typescript。

https://stackblitz.com/edit/angular-gycutu 中的示例。

谢谢。

【讨论】：

【解决方案2】：

您可以通过在您将滚动的 div 元素中传递滚动事件并定位您想要同步滚动的 div 元素来做到这一点。这是示例 html 文件代码和 Typescript 文件代码。

my-comp.component.html

<div id="scrollDiv1" class="div" (scroll)="onScrollDiv1($event)">
 <div class="content">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
 </div>
</div>
<!-- target div you want to scroll on scrolling scrollDiv1 -->
<div id="scrollDiv2" class="div">
 <div class="content">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
 </div>
</div>

my-comp.component.ts

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

@Component({
 selector: 'app-my-comp',
 templateUrl: './my-comp.component.html',
 styleUrls: ['./my-comp.component.scss']
})
export class MyCompComponent implements OnInit {
 constructor() { }

 ngOnInit(): void {

 }

 onScrollDiv1(event){
  var scroll2 = document.querySelector('#scrollDiv2');
  scroll2.scrollLeft = event.target.scrollLeft;
 }

}

此外，您还可以将 jquery 添加到您的 Angular 应用程序中并使用它。要将 jquery 安装到您的 Angular 应用程序，请参阅下面的链接。 add jquery to your angular app

【讨论】：