Javascript 使用angular 7同步水平滚动

有人能帮我实现角度同步水平滚动吗

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

这是源代码：

您只需要将代码转换为您的代码（例如，使用本机typescript或将jquery添加到项目中）

现在我正在中创建一个示例，您给我几分钟时间创建一个angular应用程序示例

我不建议使用jquery，因为增量构建预算。最好使用打字脚本

例如

---

谢谢。

您可以通过在div元素中传递scroll事件来完成此操作，您将滚动并指向要同步滚动的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>

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

---

第一个答案使用

元素。scrollTop

，您可以使用

@ViewChild（）以角度方式实现它。

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;
 }

}