Solve modal layout shifts with ease—this CSS property offers a simple way to prevent modal layout shifts in CSS.

Think of scrollbars like seatbelts—they keep everything in place. But when they disappear, content shifts around. In this article, I’ll show you how to use scrollbar-gutter, a simple CSS property, to keep your modal layouts stable.

TL;DR;

When opening modals, layout shifts occur due to disappearing scrollbars when overflow: hidden is set. The CSS property scrollbar-gutter solves this by reserving scrollbar space, keeping content stable. To use:

html {
  scrollbar-gutter: stable;
}

This reserves the space for the scrollbar even when hidden, preventing layout jumps. Supported in Chrome, Firefox, and coming soon to Safari.

FAQs

How to Use CSS for Layout Stability with scrollbar-gutter

The scrollbar-gutter property in CSS is a powerful tool that controls whether space is reserved for scrollbars, which helps prevent layout shifts when content overflow changes. By default, when you set overflow to hidden, scrollbars disappear, and this changes the page width, causing content jumps. With scrollbar-gutter: stable, the browser reserves the scrollbar space regardless of the overflow setting, preventing these shifts.

html {
  scrollbar-gutter: stable;
}

This code keeps space for the scrollbar even when it’s hidden, maintaining consistent layout behavior.

Use Cases for Fixing Scrollbar Content Shifts

• Modals and Popups: When opening a modal, setting overflow: hidden on the body is common practice to prevent background scrolling. However, this often causes layout shifts due to the disappearing scrollbar. Applying scrollbar-gutter: stable ensures your modal’s position remains consistent.
• Full-Screen Content: For full-screen experiences like galleries or image lightboxes, maintaining a stable layout is crucial. Using scrollbar-gutter can help avoid sudden content shifts.
• Page Transitions: When using frameworks that rely on page transitions or dynamic content loading, reserving scrollbar space ensures smoother animations and a consistent user experience.

Browser Support for CSS Fixes in Modal Shifts

Currently, scrollbar-gutter is supported in stable versions of Chrome and Firefox, with Safari expected to add support soon. For older browsers, the effect will not take place. However, you can provide a fallback approach using JavaScript if necessary to add padding when overflow: hidden is applied.

if (!CSS.supports('scrollbar-gutter: stable')) {
  document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + 'px';
}

This snippet detects whether scrollbar-gutter is supported. If not, it calculates and adds the padding manually.

Helpful Links and Resources

• MDN Web Docs: scrollbar-gutter: In-depth documentation with examples and browser support details.
• Can I use… scrollbar-gutter: Browser compatibility overview for this CSS property.
• Modern CSS — Empowering Tomorrow’s Web Designers: Stay ahead with modern CSS. Join me as I explore new CSS releases that empower the web designers of tomorrow.

Example for Dynamic Modals

Here’s how you can implement scrollbar-gutter for dynamic modals, ensuring consistent layout behavior:

body.modal-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

And in your JavaScript:

function openModal() {
  document.body.classList.add('modal-open');
}

function closeModal() {
  document.body.classList.remove('modal-open');
}

This approach combines the use of scrollbar-gutter with conditional class manipulation for easy modal management.

Conclusion

Using scrollbar-gutter is an efficient and modern solution to prevent layout shifts caused by disappearing scrollbars, making your modals and full-screen content more consistent. With browser support expanding, this is a must-know property for frontend developers focusing on smooth and professional user experiences.