ngx-syncscroll

SyncScroll is a micro Angular component, which allows to scroll two or more scrollable areas simultaneously.

Usage no npm install needed!

<script type="module">
  import ngxSyncscroll from 'https://cdn.skypack.dev/ngx-syncscroll';
</script>

README

ngx-syncscroll

NPM

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.