ngx-syncscroll

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.

This project was generated with Angular CLI.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

OR

Go to sync-scroll.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

<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.
disableSync	boolean	false	Disables synchronous scrolling.
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.