CODEWITHSUNDEEP
javascriptangular
M Narender reddy
M Narender reddy

Reputation: 1

Synchronized horizontal scrolling using angular 7

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?

Upvotes: 0

Views: 1245

Answers (2)

pacocom
pacocom

Reputation: 352

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.

Upvotes: 1

Milan Lakhani
Milan Lakhani

Reputation: 524

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

Upvotes: 1

Related Questions