前端修改滾動條樣式

本文轉載自查看原文 2021-10-11 09:42 983 前端

純css修改默認滾動條的樣式

 1 &::-webkit-scrollbar {
 2   // 滾動條的背景
 3   width: 16px;
 4   background: #191a37;
 5   height: 14px;
 6 }
 7  
 8 &::-webkit-scrollbar-track,
 9 &::-webkit-scrollbar-thumb {
10   border-radius: 999px;
11   width: 20px;
12   border: 5px solid transparent;
13 }
14  
15 &::-webkit-scrollbar-track {
16   box-shadow: 1px 1px 5px #191a37 inset;
17 }
18  
19 &::-webkit-scrollbar-thumb {
20   //滾動條的滑塊樣式修改
21   width: 20px;
22   min-height: 20px;
23   background-clip: content-box;
24   box-shadow: 0 0 0 5px #464f70 inset;
25 }
26  
27 &::-webkit-scrollbar-corner {
28   background: #191a37;
29 }

下邊這個很精簡。值得一試

 1 &::-webkit-scrollbar {
 2   width: 6px;
 3   height: 6px;
 4   background: transparent;
 5 }
 6  
 7 &::-webkit-scrollbar-thumb {
 8   background: transparent;
 9   border-radius: 4px;
10 }
11  
12 &:hover::-webkit-scrollbar-thumb {
13   background: hsla(0, 0%, 53%, 0.4);
14 }
15  
16 &:hover::-webkit-scrollbar-track {
17   background: hsla(0, 0%, 53%, 0.1);
18 }

這個的優點在於鼠標移上才會顯示修改的滾動條體驗很好

（提示下隱藏某軸的滾動條代碼寫法）

1 overflow-x:hidden;

轉自：腳本之家 - 前端項目修改默認滾動條樣式(小結)

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 滾動條樣式修改修改滾動條樣式關於前端滾動條，input框等樣式的修改修改滾動條樣式（iview） CSS如何修改默認滾動條樣式 vue中修改滾動條樣式 CSS - 修改滾動條樣式 css滾動條樣式修改 css修改滾動條默認樣式 table加橫向滾動條並修改滾動條樣式