寫過挺多項目都需要改變滾動條的默認(rèn)樣式 并不想單獨(dú)下載和引入插件 因此純css修改默認(rèn)滾動條的樣式 這次算統(tǒng)一整理下方法,直接上代碼。
&::-webkit-scrollbar { // 滾動條的背景 width: 16px; background: #191a37; height: 14px; } &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb { border-radius: 999px; width: 20px; border: 5px solid transparent; } &::-webkit-scrollbar-track { box-shadow: 1px 1px 5px #191a37 inset; } &::-webkit-scrollbar-thumb { //滾動條的滑塊樣式修改 width: 20px; min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px #464f70 inset; } &::-webkit-scrollbar-corner { background: #191a37; }
這個算很齊全的修改
下邊這個很精簡。值得一試
&::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; } &::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; } &:hover::-webkit-scrollbar-thumb { background: hsla(0, 0%, 53%, 0.4); } &:hover::-webkit-scrollbar-track { background: hsla(0, 0%, 53%, 0.1); }
這個的優(yōu)點(diǎn)在于 鼠標(biāo)移上才會顯示修改的滾動條 體驗很好
(提示下 隱藏某軸的滾動條代碼寫法)
overflow-x:hidden;
之前我以為是 none,半天沒變化
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選