Avoid shifting layout when opening a modal

Written byPhuoc Nguyen

Category

Tip

Created

13 Sep, 2023

When a modal pops up, it's standard practice to disable scrolling on the main page. This keeps users from accidentally clicking on content outside of the modal, which could disrupt their experience.

But here's the thing: hiding the scrollbar can cause layout shift problems. When the scrollbar disappears, it changes the size of the container, which can cause other elements to shift around. This can be especially frustrating if users are already interacting with the page.

To avoid this problem, we need to account for any changes in the container caused by hiding or showing the scrollbar. To do that, we can calculate the width of the scrollbar and make room for it accordingly.

To calculate the width of a scrollbar and adjust for it in the main page, we first need to get the original width of the body element before hiding the scrollbar. We can do this by using `document.body.offsetWidth`.

Next, we hide the scrollbar by setting `document.body.style.overflow` to `hidden`. Then, we get the new width of the body element, which is affected by hiding the scrollbar. By subtracting this new width from the original width, we can determine the actual width of the scrollbar.

const currentWidth = document.body.offsetWidth;
document.body.style.overflow = "hidden";
const scrollBarWidth = body.offsetWidth - currentWidth;

To make space for the scrollbar, we need to add its width as a right margin to the body element. We can do this by setting `document.body.style.marginRight` to `${scrollBarWidth}px`. This ensures a smooth user experience by preventing any sudden layout shifts when hiding or showing the scrollbar.

document.body.style.marginRight = `${scrollBarWidth}px`;

Here's a code snippet you can use to fix this issue when opening a modal:

const openModal = () => {
    const currentWidth = document.body.offsetWidth;
    document.body.style.overflow = "hidden";
    const scrollBarWidth = body.offsetWidth - currentWidth;
    document.body.style.marginRight = `${scrollBarWidth}px`;
};

Similarly, we reset the `overflow` and `margin-right` properties when we close a modal.

const closeModal = () => {
    document.body.style.overflow = "auto";
    document.body.style.marginRight = "";
};

#See also

Calculate the size of scrollbar

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn

Avoid shifting layout when opening a modal

#See also

Questions? 🙋

Recent posts ⚡

Newsletter 🔔