Синхронизированная горизонтальная прокрутка с использованием angular 7

Question

Не могли бы вы, кто-нибудь, помочь мне реализовать синхронизированную горизонтальную прокрутку в angular.

, ссылка ниже - это решение, но код написан в jquery.

Синхронизировано прокрутка с использованием jQuery?

Answer 1

Вы можете сделать это, передав событие прокрутки в элемент 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, смотрите ссылку ниже. добавьте jquery в ваше приложение angular

Answer 2

это исходный код: http://trunk.xtf.dk/Project/ScrollSync/jquery.scrollSync.js

Вам нужно только перевести код в ваш код (например, с использованием встроенного набора текста или добавить jquery к вашему проекту).

Теперь я создаю пример в https://angular-apcjwt.stackblitz.io, вы даете мне несколько минут на создание примера приложения angular.

Я не рекомендую использовать jquery потому что увеличивают бюджеты сборки. Лучше использовать Typescript.

Пример в https://stackblitz.com/edit/angular-gycutu.

Спасибо.