ngx-syncscroll

Demo

ngx-syncscroll is a micro library rewritten in Angular, which allows to scroll two or more scrollable areas simultaneously.

Based on https://github.com/asvd/syncscroll.

<ngx-syncscroll [classSyncScroll]="'drag-timeline'" [dragState]="true" [attributeName]="'drag-scroll-timeline'">
      <div class="dragscroll frame romanian" [ngClass]="'drag-timeline'"
           [attr.drag-scroll-timeline]="true">
        <img alt="ngx-syncscroll" src="./assets/romanian_timeline.png">
      </div>

      <div class="dragscroll frame floss" [ngClass]="'drag-timeline'"
           [attr.drag-scroll-timeline]="true">
        <img alt="ngx-syncscroll" src="./assets/floss_timeline.png">
      </div>
</ngx-syncscroll>

Installation

npm install --save ngx-syncscroll

Usage

Add NgxSyncScrollModule to your list of module imports:

import { NgxSyncScrollModule } from 'ngx-syncscroll';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxSyncScrollModule],
  bootstrap: [AppComponent]
})
class AppModule {}

You can then use the component in your templates:

@Component({
  selector: 'app',
  template: `
    <ngx-syncscroll [classSyncScroll]="'drag-timeline'" [dragState]="true" [attributeName]="'drag-scroll-timeline'">
          <div class="dragscroll frame romanian" [ngClass]="'drag-timeline'"
               [attr.drag-scroll-timeline]="true">
            <img alt="ngx-syncscroll" src="./assets/romanian_timeline.png">
          </div>
    
          <div class="dragscroll frame floss" [ngClass]="'drag-timeline'"
               [attr.drag-scroll-timeline]="true">
            <img alt="ngx-syncscroll" src="./assets/floss_timeline.png">
          </div>
    </ngx-syncscroll>
       `
})

Options

Property name	Type	Default	Description
dragState	boolean	false	Drag mode for images.
attributeName	string	null	Unique attribute name for a block with scrolling. Need to be used with [attr] property for child.
classSyncScroll	string	null	Unique class name for a block with scrolling. Need to be used with [ngClass] or html class for child.