Содержание
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Body scroll locking that just works with everything 😏
License
willmcpo/body-scroll-lock
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
fix: add px to positional css values for ios devices
Git stats
Files
Failed to load latest commit information.
README.md
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).
- disables body scroll WITHOUT disabling scroll of a target element
- works on iOS mobile/tablet (!!)
- works on Android
- 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
- -webkit-overflow-scrolling: touch still works
Aren’t the alternative approaches sufficient?
- the approach document.body.ontouchmove = (e) =>< e.preventDefault(); return false; >; locks the body scroll, but ALSO locks the scroll of a target element (eg. modal).
- the approach overflow: hidden on the body or html elements doesn’t work for all browsers
- the position: fixed approach causes the body scroll to reset
- some approaches break inertia/momentum/rubber-band scrolling on iOS
$ yarn add body-scroll-lock or $ npm install body-scroll-lock You can also load via a tag (refer to the lib folder).
// 1. Import the functions const bodyScrollLock = require('body-scroll-lock'); const disableBodyScroll = bodyScrollLock.disableBodyScroll; const enableBodyScroll = bodyScrollLock.enableBodyScroll; // 2. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav). // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element). // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired. const targetElement = document.querySelector('#someElementId'); // 3. . in some event handler after showing the target element. disable body scroll disableBodyScroll(targetElement); // 4. . in some event handler after hiding the target element. enableBodyScroll(targetElement);
// 1. Import the functions import disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks > from 'body-scroll-lock'; class SomeComponent extends React.Component targetElement = null; componentDidMount() // 2. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav). // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element). // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired. this.targetElement = document.querySelector('#targetElementId'); > showTargetElement = () => // . some logic to show target element // 3. Disable body scroll disableBodyScroll(this.targetElement); >; hideTargetElement = () => // . some logic to hide target element // 4. Re-enable body scroll enableBodyScroll(this.targetElement); >; componentWillUnmount() // 5. Useful if we have called disableBodyScroll for multiple target elements, // and we just want a kill-switch to undo all that. // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor // clicks a link which takes him/her to a different page within the app. clearAllBodyScrollLocks(); > render() return div>some JSX to go here/div>; > >
// 1. Import the functions import disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks > from 'body-scroll-lock'; class SomeComponent extends React.Component // 2. Initialise your ref and targetElement here targetRef = React.createRef(); targetElement = null; componentDidMount() // 3. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav). // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element). // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired. this.targetElement = this.targetRef.current; > showTargetElement = () => // . some logic to show target element // 4. Disable body scroll disableBodyScroll(this.targetElement); >; hideTargetElement = () => // . some logic to hide target element // 5. Re-enable body scroll enableBodyScroll(this.targetElement); >; componentWillUnmount() // 5. Useful if we have called disableBodyScroll for multiple target elements, // and we just want a kill-switch to undo all that. // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor // clicks a link which takes him/her to a different page within the app. clearAllBodyScrollLocks(); > render() return ( // 6. Pass your ref with the reference to the targetElement to SomeOtherComponent SomeOtherComponent ref=this.targetRef>>some JSX to go here/SomeOtherComponent> ); > > // 7. SomeOtherComponent needs to be a Class component to receive the ref (unless Hooks - https://reactjs.org/docs/hooks-faq.html#can-i-make-a-ref-to-a-function-component - are used). class SomeOtherComponent extends React.Component componentDidMount() // Your logic on mount goes here > // 8. BSL will be applied to div below in SomeOtherComponent and persist scrolling for the container render() return div>some JSX to go here/div>; > >
import Component, ElementRef, OnDestroy, ViewChild > from "@angular/core"; // 1. Import the functions import disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks > from "body-scroll-lock"; @Component( selector: "app-scroll-block", templateUrl: "./scroll-block.component.html", styleUrls: ["./scroll-block.component.css"] >) export class SomeComponent implements OnDestroy // 2. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav). // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element). // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired. @ViewChild("scrollTarget") scrollTarget: ElementRef; showTargetElement() // . some logic to show target element // 3. Disable body scroll disableBodyScroll(this.scrollTarget.nativeElement); > hideTargetElement() // . some logic to hide target element // 4. Re-enable body scroll enableBodyScroll(this.scrollTarget.nativeElement); > ngOnDestroy() // 5. Useful if we have called disableBodyScroll for multiple target elements, // and we just want a kill-switch to undo all that. // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor // clicks a link which takes him/her to a different page within the app. clearAllBodyScrollLocks(); > >
head> script src pl-s">some-path-where-you-dump-the-javascript-libraries/lib/bodyScrollLock.js">script> head> // 1. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav). // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element). // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired. const targetElement = document.querySelector('#someElementId'); // 2. . in some event handler after showing the target element. disable body scroll bodyScrollLock.disableBodyScroll(targetElement); // 3. . in some event handler after hiding the target element. bodyScrollLock.enableBodyScroll(targetElement); // 4. Useful if we have called disableBodyScroll for multiple target elements, // and we just want a kill-switch to undo all that. bodyScrollLock.clearAllBodyScrollLocks();
Check out the demo, powered by Vercel.
| Function | Arguments | Return | Description |
|---|---|---|---|
| disableBodyScroll | targetElement: HTMLElement options: BodyScrollOptions | void | Disables body scroll while enabling scroll on target element |
| enableBodyScroll | targetElement: HTMLElement | void | Enables body scroll and removing listeners on target element |
| clearAllBodyScrollLocks | null | void | Clears all scroll locks |
optional, default: false
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.
import disableBodyScroll > from 'body-scroll-lock'; import type BodyScrollOptions > from 'body-scroll-lock'; const options: BodyScrollOptions = reserveScrollBarGap: true, >; disableBodyScroll(targetElement, options);
optional, default: undefined
To disable scrolling on iOS, disableBodyScroll prevents touchmove events. However, there are cases where you have called disableBodyScroll on an element, but its children still require touchmove events to function.
See below for 2 use cases:
disableBodyScroll(container, allowTouchMove: el => el.tagName === 'TEXTAREA', >);
disableBodyScroll(container, allowTouchMove: el => while (el && el !== document.body) if (el.getAttribute('body-scroll-lock-ignore') !== null) return true; > el = el.parentElement; > >, >);
div id pl-s">container"> div id pl-s">scrolling-map" body-scroll-lock-ignore> . div> div>