https://github.com/klarna/disable-scroll
Fix the screen to the current position and get a canvas where to draw on top of it
https://github.com/klarna/disable-scroll
k-nl
Last synced: 13 days ago
JSON representation
Fix the screen to the current position and get a canvas where to draw on top of it
- Host: GitHub
- URL: https://github.com/klarna/disable-scroll
- Owner: klarna
- License: apache-2.0
- Created: 2017-01-27T14:07:51.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T01:53:07.000Z (about 2 years ago)
- Last Synced: 2025-04-25T20:03:13.433Z (about 1 month ago)
- Topics: k-nl
- Language: JavaScript
- Homepage:
- Size: 20.7 MB
- Stars: 15
- Watchers: 4
- Forks: 5
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @klarna/disable-scroll
[](https://travis-ci.org/klarna/disable-scroll)
[](https://www.npmjs.com/package/@klarna/disable-scroll)
[](https://klarna.github.io/disable-scroll)
> Demo of fixing a layer on top of a scrollable body. You can find it in [`https://klarna.github.io/disable-scroll`](https://klarna.github.io/disable-scroll)
Anchor the body to it’s current scroll position. This is super useful to be able to fix a layer on top and put modals in it.
This works around known issues of positioning modals with `position: fixed`.
This library is super small and has no dependencies.
## Installation
```
npm install --save @klarna/disable-scroll
```
## Usage
```javascript
import setupDisableScroll from '@klarna/disable-scroll'
// Initialize the tool
const {pin, release, container} = setupDisableScroll(window)
pin() // Sticks the body to the current position
release() // Releases the body so it becomes scrollable again
const p = document.createElement('p')
p.innerText = 'This will be positioned in the floating layer'
container.appendChild(p)
```
### API
The `@klarna/disable-scroll` lib exposes a function that takes the `window` and returns the following functions:
- `pin`: Sets the `top` of the `body` to match the current `scrollTop`, and then resizes the `body` to be the same width and height as the `window`.
- `release`: Resets the `scrollTop` from the `top` of the `body`, and then resets the `body` to its original size.
- `container` gives a reference to an element positioned on top of the body that can be targeted for putting modals when the body is pinned.
## License
[Apache 2.0](LICENSE)