Download
Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus). If the overflow property of the body is set to hidden, the body widens by the width of the scrollbar. This produces an unpleasant flickering effect, especially on websites with centered content. If the reserveScrollBarGap option is set, this gap is filled by a padding-right on the body element. If disableBodyScroll is called for the last target element, or clearAllBodyScrollLocks is called, the padding-right is automatically reset to the previous value. Works with vanilla JS and frameworks such as React / Angular / VueJS. Disables body scroll WITHOUT disabling scroll of a target element. Supports nested target elements (eg. a modal that appears on top of a flyout).
Features
- Disables body scroll without disabling scroll of a target element
- Works on iOS mobile/tablet
- Works on Safari desktop
- Works on Chrome/Firefox
- Works with vanilla JS and frameworks such as React / Angular / VueJS
- Supports nested target elements (eg. a modal that appears on top of a flyout)
- Can reserve scrollbar width
Project Samples
