不依靠外掛自定義滾動條
阿新 • • 發佈:2018-12-05
直接上css即可 給新增滾動條的標籤加上類名
隱藏自帶滾動條 新增偽元素替換樣式
/* 給滾動條標籤新增類名 scroll-style */ .scroll-style { overflow-y: auto; overflow-x: hidden; } .scroll-style::-webkit-scrollbar { /*滾動條整體樣式*/ width: 4px; /*高寬分別對應橫豎滾動條的尺寸*/ height: 4px; } .scroll-style::-webkit-scrollbar-thumb { /*滾動條裡面小方塊*/ border-radius: 5px; width: 4px; background: transparent; } .scroll-style::-webkit-scrollbar-track { /*滾動條裡面軌道*/ border-radius: 0; width: 10px; background-color: transparent; } .scroll-style:hover { overflow-y: auto; } .scroll-style:hover::-webkit-scrollbar { /*滾動條整體樣式*/ width: 4px; /*高寬分別對應橫豎滾動條的尺寸*/ height: 4px; } .scroll-style:hover::-webkit-scrollbar-thumb { /*滾動條裡面小方塊*/ border-radius: 5px; width: 4px; background: #c0c0c0; } .scroll-style:hover::-webkit-scrollbar-track { /*滾動條裡面軌道*/ border-radius: 0; width: 10px; background-color: transparent; }