https://github.com/bkwld/body-scroll-toggle
Enables / disables scroll on the body
https://github.com/bkwld/body-scroll-toggle
Last synced: over 1 year ago
JSON representation
Enables / disables scroll on the body
- Host: GitHub
- URL: https://github.com/bkwld/body-scroll-toggle
- Owner: BKWLD
- License: mit
- Created: 2016-02-23T22:42:27.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2019-11-08T03:15:13.000Z (over 6 years ago)
- Last Synced: 2025-03-24T01:12:31.914Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 24.4 KB
- Stars: 19
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> I'm recommending you use https://github.com/willmcpo/body-scroll-lock rather than this package now.
# Body scroll toggle
Disables scroll-ability of the `body`, like you'd want when a fixed position modal is open, by logging the current scroll position and then making the body position fixed using that scroll offset of the body top. Thus, the user shouldn't see the body shift position. Many approaches just `overflow:hidden` on the body, but this does not disable scrolling in iOS.
```js
const bodyScroll = require('body-scroll-toggle')
bodyScroll.disable()
bodyScroll.enable()
```
A disadvantage of this approach is that the iOS bottom nav bar will get re-displayed when the scroll is disabled.
## Alternatives
There are JS `event.preventDefault()` based approaches like:
- https://github.com/gilbarbara/disable-scroll
- https://github.com/ultrapasty/jquery-disablescroll
These work but will prevent scrolling of internal elements that have an `overflow:scroll`, which is often the case in mobile navs.
## Contributing
Run `npm version && npm publish` to push new builds up.