[css]自定义滚动条

楼主^#

更多发布于：2018-12-12 17:20

在实际工作中很多默认样式不够美观，因此我们需要对默认样式进行更改，这里讲一下如何自定义滚动条。

首先分析一下滚动条的构成：分为整体的滚动条样式、滚动条的滑轨、滚动条的滑块。这三部分在CSS中的代码就分别是：-webkit-scrollbar、-webkit-scrollbar-thumb、-webkit-scrollbar-track。

接下来是demo的代码：

&lt;div class="content content-1"&gt;
        &lt;div class="main"&gt;&lt;/div&gt;
    &lt;/div&gt;

.content {
   width: 50px;
   height: 200px;
   overflow: auto;
   float: left;
   margin: 5px;
   border: none;
   }

   .main {
   width: 30px;
   height: 300px;
   margin: 0 auto;
   }

   .content-1::-webkit-scrollbar {
   /*滚动条整体样式*/
   width: 10px;
   /*高宽分别对应横竖滚动条的尺寸*/
   height: 1px;
   }

   .content-1::-webkit-scrollbar-thumb {
   /*滚动条里面小方块*/
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
   background: #535353;
   }

   .content-1::-webkit-scrollbar-track {
   /*滚动条里面轨道*/
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
   border-radius: 10px;
   background: #EDEDED;
   }

喜欢2

sunshine 管理员最后登录2023-10-30 发帖数170 加关注写私信	沙发^# 发布于：2018-12-24 12:58 这个好，很适用
	回复(0) 喜欢(0)

[css]自定义滚动条

最新喜欢：