I am using the following library for locking scrolling of the body of page and only allow scrolling on my modal if it is open. modal/lightbox/flyouts.

ontouchmove = (e) => { e.


15 hours ago · Inspired by Robby Leonardi. There are bound to be react-modal alternatives that come with scroll lock built-in as well, so I'd suggest your look for a modal/scroll-lock package that works for you or look into the source code of a package like body-scroll-lock to try and understand. Start using react-modal in your project by running `npm i react-modal`.

the approach document.

Mar 4, 2019 · 8 Answers. . .

React useBodyScrollLock hook. May 11, 2016 · How would you make the body fixed and the modal window scrollable in case its content exceeds the window size? Applying the overflow: hidden on body will prevent the whole page to scroll.

You can choose a different parent element by providing a function to the parentSelector prop that returns the element to be used: <Modal.

Use the useLayoutEffect () with an empty array as the second argument to execute the provided.

Setting Up the Application. When I click on the Modal, it gets rid of my ability to scroll down the page.

React side-effect hook that locks scrolling on the body element. My components > Navbar.

A form is a separate component from the Modal and can be modified without affecting the modal itself.
preventDefault; return false; }; locks the body scroll, but ALSO locks the scroll of a target element (eg.


️ A great package to easily create beautiful modal in React.

️ Close the modal by dragging the top of the modal in mobile devices. style. style.

. . This CSS will prevent the background page from scrolling under the modal: body. . body. the approach overflow: hidden on the body or html elements doesn't work for all browsers.


With CodeSandbox, you can easily learn how AWolf81 has skilfully integrated different packages and frameworks to create a truly impressive web app. preventDefault(); return false; }; locks the body scroll, but ALSO locks the scroll of a target element (eg.

15 hours ago · Inspired by Robby Leonardi.


Tua body scroll lock.

If we want to support iOS 14 we need to add 'touchmove' as well.

Explore this online React modal with body scroll lock (forked) sandbox and experiment with it yourself using our interactive online playground.