css使用overflow属性控制滚动条的样式

最新推荐文章于 2025-06-09 18:20:52 发布

原创最新推荐文章于 2025-06-09 18:20:52 发布 · 2.6w 阅读

17 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用CSS的overflow属性来控制滚动条的显示与隐藏，例如：overflow-x:hidden隐藏横向滚动条，overflow-y:scroll强制显示纵向滚动条。同时，展示了如何自定义滚动条的样式，包括箭头颜色、滚动条各部分颜色以及鼠标指针样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

overflow: auto; 在需要时内容会自动添加滚动条
overflow: scroll; 显示横、纵向滚动条

overflow-x: hidden; 不显示横向的滚动条

overflow-y: hidden; 不显示纵向的滚动条

overflow-x: scroll; 显示横向的滚动条

overflow-y: scroll; 显示纵向滚动条

代码如下：

/*没有水平滚动条*/
<div style="overflow-x:hidden">test</div>
/*没有垂直滚动条*/
<div style="overflow-y:hidden">test</div>
/*没有滚动条*/
<div style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">test</div>
/*自动显示滚动条*/
<div style="height:100px;width:100px;overflow:auto;">test</div>

Body {}{
scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/
scrollbar-face-color: #333; /**//*立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜
色*/
scrollbar-highlight-color: #666; /**//*滚动条空白部分的
颜色*/
scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜
色*/
scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴
影的颜色*/
scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/
Cursor:url(mouse.cur); /**//*自定义个性鼠标*/
}