使用CSS的overflow属性控制内容溢出行为，常见值有visible、hidden、scroll和auto；2. 通过overflow-y或overflow-x实现垂直或水平滚动，配合white-space等属性优化显示效果；3. 利用scrollbar-width和::-webkit-scrollbar自定义滚动条样式，提升用户体验。
当页面内容超出容器范围时，我们常需要控制其显示方式。通过CSS的overflow属性与滚动机制结合，可以实现内容溢出时的隐藏或滚动显示效果。
理解 overflow 属性的基本用法
overflow 是控制容器内容溢出行为的关键属性，常用值包括：
- visible：默认值，内容不被裁剪，可能显示在容器外部
- hidden：溢出内容被裁剪且不可见
- scroll：无论是否溢出，都显示滚动条
- auto：仅在内容溢出时显示滚动条
例如设置一个固定高度的盒子，内容超出时隐藏：
.box {
width: 300px;
height: 100px;
overflow: hidden;
border: 1px solid #ccc;
}实现垂直滚动（Y轴）
若只想让内容在垂直方向可滚动，使用 overflow-y：
立即学习“前端免费学习笔记（深入）”；
.scroll-y {
height: 150px;
overflow-y: auto;
overflow-x: hidden; /* 防止水平滚动 */
}这样当内容高度超过容器时，会出现垂直滚动条，用户可滑动查看完整内容。
实现水平滚动（X轴）
对于长表格、时间轴等横向内容，可用 overflow-x：
.scroll-x {
width: 200px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap; /* 防止文字换行 */
}配合 white-space: nowrap 可确保内联元素保持一行显示。
结合 scroll 容器的样式优化
使用 overflow: auto 或 scroll 后，浏览器会自动生成滚动条。可通过CSS进一步美化体验：
- 现代浏览器支持 scrollbar-width（Firefox）和 ::-webkit-scrollbar（Chrome/Safari）来自定义滚动条样式
- 移动端可添加 touch-action: pan-y 提升滑动流畅度
- 避免嵌套多层滚动容器，以免操作混乱
基本上就这些。掌握 overflow 与滚动行为的配合，能有效处理各种内容溢出场景，提升界面可用性。关键在于根据内容方向选择合适的属性，并注意交互细节。
