模态框打开时禁止页面滚动且避免自动跳转到顶部

Hey there! I’ve dealt with this exact frustration before—using position: fixed to lock scroll does work, but it yanks the page to the top because fixed positioning pulls the body out of the normal document flow and anchors it to the viewport. Let’s go through a couple of solid fixes that keep scroll locked and prevent that annoying jump.

Solution 1: Save Scroll Position and Offset the Fixed Body #

This method preserves the user’s scroll position by manually offsetting the fixed body:

1. When opening the modal:

   • Capture the current scroll position:

     const scrollY = window.scrollY;
     const body = document.body;
     

   • Add your modal-open class to the body, and store the scroll position in a data attribute:

     body.classList.add('modal-open');
     body.dataset.scrollY = scrollY;
     

   • Inject the scroll value as a CSS variable, then update your CSS to offset the body:

     body.style.setProperty('--scroll-y', `${scrollY}px`);
     

     body.modal-open {
       overflow: hidden;
       position: fixed;
       width: 100%;
       top: calc(-1 * var(--scroll-y));
     }
     

2. When closing the modal:

   • Remove the modal class and restore the scroll position:

     body.classList.remove('modal-open');
     window.scrollTo(0, parseInt(body.dataset.scrollY));
     body.style.removeProperty('--scroll-y');
     

This keeps the body fixed in place relative to where the user was scrolling, no jump to top.

Solution 2: Avoid Fixed Positioning Entirely #

If you don’t want to mess with fixed positioning, you can lock scroll using just overflow: hidden—but you need to handle the scrollbar gap to prevent page content from shifting:

1. When opening the modal:

   • Calculate the width of the browser’s scrollbar:

     const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
     const body = document.body;
     

   • Add the modal class and apply padding to offset the scrollbar removal:

     body.classList.add('modal-open');
     body.style.paddingRight = `${scrollbarWidth}px`;
     

   • Your CSS stays simple:

     body.modal-open {
       overflow: hidden;
     }
     

2. When closing the modal:

   • Remove the class and reset the padding:

     body.classList.remove('modal-open');
     body.style.paddingRight = '';
     

This method keeps the body in normal flow, so no scroll jump at all. The padding adjustment ensures your page content doesn’t shift left when the scrollbar disappears.

Why position: relative Didn’t Work #

When you set body to position: relative, it stays in the normal document flow—meaning its height is still determined by the page content, not the viewport. overflow: hidden on a relative body won’t block scrolling because the body’s height is longer than the viewport, so the browser still allows scrolling through the content. Fixed positioning works because it forces the body to match the viewport size, but that’s what causes the jump.

Hope one of these fixes works for you—let me know if you need further tweaks!

内容的提问来源于stack exchange，提问作者JohnyJohnson