Prevent Page Scrolling When a Modal is Open

Prevent page scrolling when the modal box is opened

Have you ever encountered this situation: Open a modal box, scroll in it, close it, and the page jumps to another location?

This is because the modal box is just an element on the page, it may remain in place, but the rest of the page is still functioning properly.

Sometimes this doesn't matter, such as when the screen height is exactly equal to the viewport height. But in other cases, a scrolling problem occurs. The good news is that we can prevent this with some CSS (and JavaScript) tricks.

Start with a simple solution

We can significantly reduce the problem of page scrolling when the modal box is opened by setting the height of the entire body to the full viewport height and hiding vertical overflow when the modal box is opened:

 <code>body.modal-open { height: 100vh; overflow-y: hidden; }</code>

This is good, but if we have scrolled through the page elements before opening the modal box, there will be a slight horizontal rearrangement. The viewport width increases by about 15 pixels, which is exactly the width of the scrollbar. Let's adjust the right fill of the body a little to avoid this.

 <code>body { height: 100vh; overflow-y: hidden; padding-right: 15px; /* 避免宽度重排*/ }</code>

Note that the height of the modal box must be less than the viewport height for this method to work. Otherwise, the scroll bar on the body will be necessary.

What to do on mobile?

This solution works well on both desktop and Android mobile. However, iOS Safari needs more processing because the body still scrolls when the modal box opens when clicking and moving on the touch screen.

We can set the body to fixed positioning as a solution:

 <code>body { position: fixed; }</code>

It's OK now! When touching the screen, the body will not respond. However, there is still a "small" problem here. Assuming the modal box trigger is at the bottom of the page, we click to open it. very good! But now we automatically scroll to the top of the screen, which is as confusing as the scrolling behavior we are trying to solve.

Oops!

So we need to use JavaScript

We can use JavaScript to avoid the bubble of touch events. We all know that there should be a background layer when the modal box is opened. Unfortunately, in iOS, stopPropagation is a bit awkward to work with touch events. But preventDefault works very well. This means we have to add event listeners to each DOM node included in the modal box—not just on the background or modal box layer. The good news is that many JavaScript libraries can do this, including the proven jQuery.

One more thing: What if we need to scroll inside the modal box? We still need to trigger the response to the touch event, but we still need to stop the bubbling when it reaches the top or bottom of the modal box. This seems very complicated, so we haven't completely solved the problem.

Enhanced fixed body method

What we are using is:

 <code>body { position: fixed; }</code>

If we know the top position of scrolling and add it to our CSS, the body doesn't scroll back to the top of the screen, so the problem is solved. We can use JavaScript to calculate the scroll top and add that value to the body style:

 // When the modal box is displayed, we need a fixed body
document.body.style.position = 'fixed';
document.body.style.top = `-${window.scrollY}px`;

// When the modal box is hidden, we need to keep it at the top of the scroll position document.body.style.position = '';
document.body.style.top = '';

This works, but there is still a little leak after the modal box is closed. Specifically, when the modal box is open and the body is set to fixed, the page seems to have lost its scrolling position. So we have to retrieve the location. Let's modify our JavaScript to solve this problem.

 // When the modal box is hidden...
const scrollY = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1);

nailed it! The body no longer scrolls when the modal box is open and remains in the scroll position when the modal box is open and closed. Long live!

The above is the detailed content of Prevent Page Scrolling When a Modal is Open. For more information, please follow other related articles on the PHP Chinese website!