scroll滚动条样式修改

最新推荐文章于 2022-08-07 21:44:45 发布

weixin_30343157

最新推荐文章于 2022-08-07 21:44:45 发布

阅读量389

点赞数

CC 4.0 BY-SA版权

文章标签： java

原文链接：http://www.cnblogs.com/cczlovexw/p/7279880.html

本文介绍了如何通过CSS自定义HTML元素中的滚动条样式，包括滚动条的轨道颜色、宽度及滚动条滑块的颜色等。

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

一般我们有两种情况会出现滚动条，一种是overflow,一种是使用scroll.

当我们需要改变这个滚动条样式的时候，我们需要做以下的修改：

html:

<div id="style-2">里是富文本这里是富文本这里是富文本这里是富文本这里是富文本这里是富文本</div>

css:

#style-2{height:20px;width:50px;overflow:auto;}

#style-2::-webkit-scrollbar-track{background-color: #242d3e;-webkit-box-shadow: inset 0 0 6px #242d3e;}
   /*定义滚动条高宽及背景*/
    #style-2::-webkit-scrollbar{width: 5px;background-color: #242d3e;}
   /*定义滚动条*/
  #style-2::-webkit-scrollbar-thumb {background-color: #09a5ee;border-radius: 5px;}