Have a google of how people lock the body scroll and you’ll come across a few solutions to accomplish this. The basic use case is:
- Enable some
targetElementto appear above the body with
- After it appears, use some solution to disable body scrolling so scrolling within the
targetElementdoesn’t scroll the body content.
Here are the likely solutions you’ll come across:
1. CSS Overflow
This approach works for desktop browsers, and mobile Android. However, it fails for mobile iOS (phone and tablets). OK, let’s try approach #2.
2. Prevent Default
Great solution — scrolling is blocked! But it also blocks scrolling inside the
targetElement. If content in the
targetElement has height exceeding the element’s set height, you will want to have it scroll!!!!!
3. Position Fixed
If you make the body
position: fixed, the body will scroll to the top thus losing the body’s original scroll position. Not ideal UX!
Proposed Solution — body-scroll-lock
Body scroll locking that just works with everything 😏
Since all devices except iOS respect the
overflow: hidden on the
html/bodyelements, we can use this approach for these devices.
For iOS — we check if
targetElement has been scrolled to the bottom or top. If it has, then apply the
The logic to achieve the proposed solution can be found here.
For convenience, the solution can be downloaded as an NPM package body-scroll-lock and used in projects using vanilla JS or frameworks such as React.