https://github.com/sezmars/syncscroll
Syncscroll is a micro library rewritten in Angular, which allows to scroll two or more scrollable areas simultaneously. Demo - https://sezmars.github.io/syncscroll
https://github.com/sezmars/syncscroll
angular ngx ngx-syncscroll scroll scrolling synchronized syncscroll
Last synced: 11 months ago
JSON representation
Syncscroll is a micro library rewritten in Angular, which allows to scroll two or more scrollable areas simultaneously. Demo - https://sezmars.github.io/syncscroll
- Host: GitHub
- URL: https://github.com/sezmars/syncscroll
- Owner: sezmars
- License: mit
- Created: 2019-07-31T17:41:11.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T16:25:08.000Z (about 3 years ago)
- Last Synced: 2025-04-24T06:15:11.815Z (11 months ago)
- Topics: angular, ngx, ngx-syncscroll, scroll, scrolling, synchronized, syncscroll
- Language: HTML
- Homepage:
- Size: 3.65 MB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-syncscroll
[](https://www.npmjs.com/package/ngx-syncscroll) [](https://npmjs.org/package/ngx-syncscroll) [](https://npmjs.org/package/ngx-syncscroll) [](https://angular.io)
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](https://github.com/angular/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](https://sezmars.github.io/syncscroll/).
## 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.
```HTML
```
## Installation
```shell
npm install --save ngx-syncscroll
```
## Usage
Add `NgxSyncScrollModule` to your list of module imports:
```typescript
import { NgxSyncScrollModule } from 'ngx-syncscroll';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgxSyncScrollModule],
bootstrap: [AppComponent]
})
class AppModule {}
```
You can then use the component in your templates:
```typescript
@Component({
selector: 'app',
template: `
`
})
```
### 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. |