Synchronized horizontal scrolling using angular 7

Question

could you someone help me to implement Synchronized horizontal scrolling in angular.

the below link is the solution but the code is written in jquery.

Synchronized scrolling using jQuery?

Answer 1

this is the source code: http://trunk.xtf.dk/Project/ScrollSync/jquery.scrollSync.js

You only need translate the code to you code (for example using native typescript or add jquery to your proyect).

Now I am creating a example in https://angular-apcjwt.stackblitz.io, you give me a few minutes to create a angular app example.

I don't recommended use jquery because increment build budgets. Better use Typescript.

Example in https://stackblitz.com/edit/angular-gycutu.

Thank.

Answer 2

You can do this by passing scroll event in the div element you will scroll and target the div element you want to synchronously scroll. Here is the sample html file code and Typescript file code.

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

}

furthermore , you can also add jquery to your angular app and use it. for installing jquery to your angular app , refer below link. add jquery to your angular app