使用 overflow: auto 可实现内容溢出时才显示滚动条，提升界面整洁度；通过设置容器 overflow 为 auto，浏览器会自动判断是否显示滚动条，内容未溢出时不显示，溢出时自动出现，适用于垂直或水平滚动场景。
当页面内容超出容器高度时才显示滚动条，这种按需显示的滚动条能提升界面整洁度。实现这一效果的关键在于正确使用 CSS 的 overflow 属性，并结合合适的布局结构。
1. 使用 overflow: auto 控制滚动条显示
将容器的 overflow 属性设置为 auto，可以让浏览器自动判断是否需要显示滚动条：
• 当内容未溢出时，不显示滚动条• 当内容超出容器高度或宽度时，自动出现对应方向的滚动条
• 适用于垂直、水平或双方向滚动控制
示例代码：
<div style="width: 300px; height: 200px; overflow: auto; border: 1px solid #ccc;"> <p>这里是一段较长的内容...</p> </div>
2. 隐藏默认滚动条但保留滚动功能（可选）
如果希望在内容溢出时仍保持界面美观，可以隐藏原生滚动条，改用自定义样式或通过其他交互提示用户可滚动。
立即学习“前端免费学习笔记（深入）”；
• 注意：隐藏后用户可能难以发现内容可滚动，需谨慎使用
示例：
<style>
.container {
width: 300px;
height: 200px;
overflow: auto;
}
.container::-webkit-scrollbar {
display: none;
}
/* Firefox */
.container {
scrollbar-width: none;
}
</style>3. 确保父级容器不强制显示滚动条
有时即使内容未溢出也出现滚动条，可能是父元素设置了固定尺寸且 overflow: scroll 或未正确重置默认样式。
• 检查 body、html 标签是否有不必要的 overflow 设置• 避免给不需要滚动的容器设置 overflow: scroll
• 使用 overflow-x 和 overflow-y 单独控制方向更灵活
4. 动态内容场景下的处理建议
若容器内容是动态加载的（如 AJAX 请求），初始时不溢出，后续添加内容后可能超出。此时仍推荐使用 overflow: auto，浏览器会自动响应内容变化。
• 不需要 JavaScript 手动监听高度变化• 只要容器尺寸固定，auto 会自然触发滚动条
基本上就这些。核心是合理使用 overflow: auto，避免滥用 scroll，再配合结构和样式微调，就能实现“有溢出才显示”的干净体验。
