Implementing Scroll Disabling Without Hiding the Scrollbar

Problem Background and Requirements Analysis

In web development, there's often a need to disable page scrolling when displaying modals or lightboxes. While the traditional overflow: hidden approach achieves scroll disabling, it causes layout jumps as the scrollbar's occupied space gets redistributed. This visual disruption negatively impacts user experience, particularly in scenarios requiring layout stability.

Core Solution Approach

By combining CSS's position: fixed property with overflow-y: scroll, we can maintain scrollbar visibility while disabling content scrolling. The key insight involves fixing the page body at its current position to prevent scroll behavior.

CSS Implementation Details

Define the .noscroll class to apply scroll-disabling styles:

.noscroll {
  position: fixed; 
  top: var(--st, 0);
  inline-size: 100%;
  overflow-y: scroll; 
}

Here, CSS custom property --st dynamically sets the top value, ensuring the page maintains its current scroll position when scrolling is disabled. inline-size: 100% guarantees element width remains unaffected by positioning changes.

JavaScript Dynamic Control

Calculate current scroll position and apply styles via JavaScript:

const b = document.body;
b.style.setProperty('--st', -(document.documentElement.scrollTop) + "px");
b.classList.add('noscroll');

This code first retrieves the document element's scroll position, then sets the top property using a negative value because fixed positioning alters the element's positioning reference. Finally, it adds the noscroll class to apply scroll-disabling styles.

Scroll Position Preservation Mechanism

When the page has already been scrolled, directly applying position: fixed would cause the page to jump back to the top. By dynamically calculating the scrollTop value and setting it as the top property, we precisely maintain the current scroll position. This method works effectively across various scroll depth scenarios.

Browser Compatibility Considerations

Different browsers handle scrollTop differently. For legacy IE browsers, it's recommended to apply styles to the html element rather than the body element to avoid double scrollbar issues. Modern browsers typically handle the body element's scroll properties correctly.

Complete Implementation Workflow

The complete scroll disabling workflow involves: detecting current scroll state, calculating scroll position, and applying fixed positioning styles. When restoring scroll, relevant styles must be removed and the original scroll position reinstated. This implementation avoids layout jumps and provides smooth user experience.

Performance Optimization Recommendations

In scenarios with frequent scroll toggling, cache DOM query results to avoid repeated calculations. For mobile devices, special handling for touch scrolling must be considered. Through event delegation and appropriate throttling mechanisms, performance can be further enhanced.

Practical Application Scenarios

This technique is particularly suitable for modal dialogs, full-screen lightboxes, sidebar menus, and other components requiring temporary page scroll disabling. By keeping the scrollbar visible, users remain aware that page content extends beyond the viewport, while avoiding the visual disturbance of layout jumps.