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'"><divclass="dragscroll frame romanian" [ngClass]="'drag-timeline'"
[attr.drag-scroll-timeline]="true"><imgalt="ngx-syncscroll" src="./assets/romanian_timeline.png"></div><divclass="dragscroll frame floss" [ngClass]="'drag-timeline'"
[attr.drag-scroll-timeline]="true"><imgalt="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]})classAppModule{}

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.