NGX Scroll locker
Angular module for Page Scroll locking
Why scroll lock?
The idea of this component is make the process of locking the page scroll transparent and easier. So the main point is integrate this component with other tooling process, such as:
- When open a modal component
- Open a hamburguer menu
- Any other that you like :)
It's totally transparent for you and you can integrate easier in your application, improving your user experience 🎉
Try out our demo on Stackblitz!
You can get it on NPM installing
ngx-scroll-lock module as a project dependency.
npm install ngx-scroll-lock --save
You'll need to add
NgxScrollLockModule to your application module. So that, the
<ngx-scroll-lock> components will be accessible in your application.
After that, you can use the
ngx-scroll-lock component in your templates, passing the
target element into the component itself and/or .
target: DOM element to be locked. Default:
lock: Boolean to be changed in case a scroll lock is needed from outside
;@lock = false;target = "#my-element-with-scroll";
Please make sure you have the
targetelement available when using it.
Run demo locally
- This project uses Angular CLI as base. That means you just need to run
npm startand access the link
http://localhost:4200in your browser
npm testfor run tests. In case you want to test using watch, please use
npm run tdd
this project is using
np package to publish, which makes things straightforward. EX:
np <patch|minor|major> --contents=dist/ngx-scroll-lock
For more details, please check np package on npmjs.com
Wilson Mendes (willmendesneto)