overflow:scroll滚动条样式修改

最新推荐文章于 2025-05-21 15:48:05 发布

莫三岁

最新推荐文章于 2025-05-21 15:48:05 发布

阅读量6k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： overflow:scroll修改滚动条样式文章标签： css web js html

本文链接：https://blog.youkuaiyun.com/mosansui/article/details/118705412

overflow:scroll修改滚动条样式专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何使用CSS为HTML元素添加滚动条，并详细讲解了如何定制滚动条的样式，包括滚动条的宽度、小方块的颜色和背景等，使滚动条更加美观且符合页面设计风格。

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

第一,在需要加滚动条的元素上加上overflow: scroll,并设置高度!
如:

<div><p class="AddStyle">213131321231312331312313131231212313123123123131231231</p></div>

我需要给p标签加入滚动条!代码如下!

.AddStyle{
overflow: scroll;height: 600px;
}

第二,现在p标签如果超出高度为600px的时候就有滚动条显示了!接下来修改样式!

.AddStyle::-webkit-scrollbar
{
    /*滚动条整体样式*/
    width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/  height: 1px;
}
.AddStyle::-webkit-scrollbar-thumb
{
    /*滚动条里面小方块*/
    border-radius: 10px;  background: #9e9e9e;  box-shadow: inset 0 0 5px rgba(0, 122, 204);
}
//滚动条底层颜色!
.AddStyle::-webkit-scrollbar-track
{
    border-radius: 10px;  background: #ededed;

/*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);
}