Hide or Disable Scrolling With CSS

Use CSS differently depending on whether content should be clipped, users should not scroll, or only the scrollbar should be hidden. overflow: hidden clips overflowing content and removes its visible scrollbar; it is not merely cosmetic.

Choose the Right CSS Rule

The CSS overflow shorthand controls horizontal and vertical overflow. Use hidden when clipping is intentional. Use scrollbar-width: none only when the region remains discoverably scrollable. Use overflow-x as a guard after fixing the element that caused horizontal overflow.

Disable Scrolling and Clip Overflow

Constrain a component and set only the relevant axis. This removes the normal scrollbar and clips content below the box.

<div class="preview-panel"><p>Visible text.</p><p>Extra text is clipped.</p></div>

.preview-panel { max-block-size: 8rem; overflow-y: hidden; border: 1px solid #777; padding: 1rem; }

The expected result is no vertical scrollbar and no visible text past the lower edge. Use this only when the clipped content is unnecessary or another control reveals it. For a modal, a temporary class on html and body can use overflow: hidden; verify wheel, touch, keyboard, and close behavior in supported browsers.

Hide the Scrollbar and Keep Scrolling

Keep overflow-y: auto when readers must still reach all content. Then hide the scrollbar with the standard property and a narrowly scoped non-standard fallback.

.scroll-area { max-block-size: 10rem; overflow-y: auto; }
@supports (scrollbar-width: none) { .scroll-area { scrollbar-width: none; } }
@supports not (scrollbar-width: none) { .scroll-area::-webkit-scrollbar { display: none; } }

The box still scrolls with a wheel, touch gesture, keyboard, or trackpad. ::-webkit-scrollbar is non-standard; test that fallback. The scrollbar-width documentation warns that hiding a scrollbar can make scrolling hard to discover, so provide a visible cue or an alternative control.

Prevent Horizontal Overflow

A horizontal scrollbar usually exposes a layout error: fixed-width media, a flex item that cannot shrink, or an unbreakable string. Fix that cause before clipping it.

.page-content { max-inline-size: 100%; overflow-x: hidden; }
.page-content img, .page-content video { display: block; max-inline-size: 100%; block-size: auto; }
.page-content code { overflow-wrap: anywhere; }

overflow-x: hidden is a final clipping guard, not a replacement for responsive sizing. overflow-x: clip also prevents programmatic scrolling and must not surround interactive content that a keyboard user needs.

Do Not Confuse overscroll-behavior

overscroll-behavior: contain controls scroll chaining at the edge of a scrollable modal; it does not hide a scrollbar or disable scrolling. Use it when a gesture should not scroll the page behind a modal, as documented by MDN.

Accessibility and Browser Notes

Do not hide essential reading, navigation, fields, or controls without another clear affordance. Test keyboard focus: Tab must not reach clipped content that cannot be revealed. overflow: hidden can still expose focused or script-scrolled content, whereas clip cannot. Finally, scrollbar-gutter: stable reserves layout space; it does not hide or disable scrolling.

Before shipping a change, test both the normal and constrained states at narrow and wide viewport widths. Check a mouse wheel, trackpad, touch gesture, Page Down, arrow keys, Tab, and a focused descendant near the clipped edge. Verify that a modal restores page scrolling when it closes and that its own content remains reachable. Inspect oversized images, long URLs, preformatted code, and flex or grid children rather than relying on clipping to conceal them. These checks turn a visual scrollbar request into a predictable interaction decision.