DiscuzQ 3.0 美化滚动条-其他资源-魔趣建站-我们共同的建站资源共享平台！

DiscuzQ 3.0 美化滚动条 [复制链接]

moqu8 2021-7-20

2701 0

资源介绍：

【测试说明】
DiscuzQ 3.0 美化滚动条，默认的滚动条看起来确实没有个性，轻松增加几行代码美化一下吧。可以根据自己网站颜色调整滚动条的颜色，还可以调整圆角，方角。滚动条的大小。

测试截图：

第一步：找到文件：web/layout/index/pc/index.module.scss

第二步：添加代码，在文件最后一行添加代码。

::-webkit-scrollbar{
width: 10px;
height: 7px;
background-color: #F5F5F5;
}

/定义滚动条轨道内阴影+圆角/
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.9);
border-radius: 10px;
background-color: #F5F5F5;
}

/定义滑块内阴影+圆角/
::-webkit-scrollbar-thumb{
border-radius: 10px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, .1);
-webkit-box-shadow: inset 0 0 10px rgba(75, 144, 255, 0.9);
background-color: #c8c8c8;
}

代码说明：

-webkit-scrollbar 是滚动条大小。

-webkit-scrollbar-track 是滚动条底部颜色

-webkit-scrollbar-thumb 是滚动条拉动模块颜色

-webkit-box-shadow: inset 0 0 10px rgba(75, 144, 255, 0.9); 修改这个值便可修改颜色。

代码下载：

你也可以直接下载文件覆盖：

点击下载 discuzQ3.0美化滚动条2021-07-20.zip(大小：65.02K)

覆盖文件：web/layout/index/pc/index.module.scss