css實(shí)現(xiàn)滾動(dòng)條一直顯示，并且實(shí)現(xiàn)滾動(dòng)條樣式的修改
自帶的滾動(dòng)條只有當(dāng)鼠標(biāo)移上去的時(shí)候才會(huì)顯示，其他時(shí)候隱藏，這樣用戶很難看出這個(gè)是能劃動(dòng)的，這就需要滾動(dòng)條一直顯示在頁面上，并且需要按照自己一定的樣式去修改。
實(shí)現(xiàn)效果：文章來源：http://www.zghlxwxcb.cn/news/detail-705699.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-705699.html
先把原來的隱藏，再重新寫自定義的樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
height: 500px;
overflow-y: scroll;
overflow-x: hidden;
width: 50px;
border: 1px solid red;
}
ul::-webkit-scrollbar {
/* 隱藏默認(rèn)的滾動(dòng)條 */
-webkit-appearance: none;
}
ul::-webkit-scrollbar:vertical {
/* 設(shè)置垂直滾動(dòng)條寬度 */
width: 10px;
}
ul::-webkit-scrollbar:horizontal{
/* 設(shè)置水平滾動(dòng)條厚度 */
height: 2px;
}
ul::-webkit-scrollbar-thumb {
/* 滾動(dòng)條的其他樣式定制，注意，這個(gè)一定也要定制，否則就是一個(gè)透明的滾動(dòng)條 */
border-radius: 8px; /* 設(shè)置滾動(dòng)條的圓角 */
border: 2px solid rgba(255,255,255,.4); /* 設(shè)置滾動(dòng)條的邊框 */
background-color: rgba(0, 0, 0, .5); /* 設(shè)置滾動(dòng)條的顏色填充 */
}
</style>
</head>
<body>
<ul>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
</ul>
</body>
</html>
到了這里，關(guān)于css實(shí)現(xiàn)滾動(dòng)條一直顯示，并且實(shí)現(xiàn)滾動(dòng)條樣式的修改的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
