使用 CSS 隐藏或禁用滚动

请根据需求选择 CSS：裁剪内容、完全阻止滚动，或只隐藏滚动条。overflow: hidden 会裁剪溢出内容并移除可见滚动条；这不只是外观上的改变。

选择合适的 CSS 规则

overflow 简写属性控制水平和垂直溢出。只有在有意裁剪内容时才使用 hidden。只有在区域仍然可滚动且用户能发现时才使用 scrollbar-width: none。修复导致溢出的元素后，再把 overflow-x 作为最后的保护措施。

禁用滚动并裁剪溢出

限制组件大小，只设置需要的轴。普通滚动条会消失，框外内容会被裁剪。

<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; }

结果没有垂直滚动条，底边之外的文字也不可见。只有在被裁剪内容不重要，或有其他控件可以显示它时才这样做。模态框可以用临时类阻止 html 和 body 滚动，但要测试鼠标、触摸、键盘和关闭操作。

隐藏滚动条但保留滚动

如果读者仍需访问全部内容，请保留 overflow-y: auto，用标准属性和范围明确的回退规则隐藏滚动条。

.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; } }

区域仍可通过滚轮、触摸、键盘或触控板滚动。::-webkit-scrollbar 不是标准属性。隐藏滚动条可能让滚动方式不明显，因此应提供可见提示或替代控件。

防止水平溢出

水平滚动条通常说明布局存在问题，例如固定宽度媒体、不能收缩的 flex 项或无法断开的字符串。先修复原因。

.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 只是最后的裁剪保护，不能替代响应式尺寸。overflow-x: clip 还会阻止脚本滚动，不应包住键盘用户需要操作的内容。

不要混淆 overscroll-behavior

overscroll-behavior: contain 控制可滚动模态框到边缘时的滚动链。它不会隐藏滚动条，也不会禁用滚动。

无障碍与浏览器注意事项

不要在没有清晰替代方式时隐藏重要文字、导航、字段或控件。检查键盘焦点：Tab 不应到达无法显示的被裁剪内容。overflow: hidden 仍可能显示获得焦点或由脚本滚动到的内容，而 clip 不会。scrollbar-gutter: stable 只预留空间，不会隐藏或禁用滚动。测试窄宽视口、滚轮、触摸、Page Down、方向键、Tab，以及靠近边缘的焦点元素。

发布前，请在窄和宽视口中测试正常及受限状态。关闭模态框后必须恢复页面滚动，模态框自身内容也必须仍可访问。不要通过裁剪掩盖问题；应检查过大的图片、很长的 URL、预格式化代码，以及 flex 或 grid 子元素。