CSS美化滚动条
文章描述：
网页的默认滚动条效果是方条和两边左右箭头图标，如何美化默认滚动条样式？
html
<div class="menu dh_menu">
<ul>
<li class="on"><a href="/s/aries/" target="_blank"><img src="images/dhs_1.png" alt="白羊座专区"></a></li>
<li><a href="/s/taurus/" target="_blank"><img src="images/dh_2.png" alt="金牛座专区"></a></li>
<li><a href="/s/gemini/" target="_blank"><img src="images/dh_3.png" alt="双子座专区"></a></li>
<li><a href="/s/cancer/" target="_blank"><img src="images/dh_4.png" alt="巨蟹座专区"></a></li>
<li><a href="/s/leo/" target="_blank"><img src="images/dh_5.png" alt="狮子座专区"></a></li>
<li><a href="/s/virgo/" target="_blank"><img src="images/dh_6.png" alt="处女座专区"></a></li>
<li><a href="/s/libra/" target="_blank"><img src="images/dh_7.png" alt="天秤座专区"></a></li>
<li><a href="/s/scorpio/" target="_blank"><img src="images/dh_8.png" alt="天蝎座专区"></a></li>
<li><a href="/s/sagittarius/" target="_blank"><img src="images/dh_9.png" alt="射手座专区"></a></li>
<li><a href="/s/capricorn/" target="_blank"><img src="images/dh_10.png" alt="摩羯座专区"></a></li>
<li><a href="/s/aquarius/" target="_blank"><img src="images/dh_11.png" alt="水瓶座专区"></a></li>
<li><a href="/s/pisces/" target="_blank"><img src="images/dh_12.png" alt="双鱼座专区"></a></li>
</ul>
</div>style
ul li{ list-style:none; }
.menu{
overflow:auto;
}
.menu ul{
display: flex;
justify-content: flex-start;
align-items: center;
}
.dh_menu ul li + li {
margin-left: 15px;
}滚动条默认效果
自定义
/* 整个滚动条背景 */
::-webkit-scrollbar {
width: 20px;
background-color: #F5F5F5;
}
/* 滚动条上的按钮 (上下箭头). */
::-webkit-scrollbar-button {
width: 20px;
background-color: rgb(166, 167, 173);
opacity: 0.2;
}
::-webkit-scrollbar-thumb {
width: 10px;
/* 上下两头给个圆角 */
background-color: #CBCBCB;
border-radius: 10px;
/* 还可以给它加个阴影 */
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #ebe9e9;
}
/* 当同时有垂直滚动条和水平滚动条时交汇的部分. */
::-webkit-scrollbar-corner {
background: steelblue;
border-radius: 50% 50%;
}效果：
发布时间：2022/08/11
发表评论