給側(cè)邊導(dǎo)航欄增加滾動(dòng)條,element的滾動(dòng)條好像不太好用,所以就使用CSS 的overflow來(lái)實(shí)現(xiàn),overflow屬性給父元素增加
HTML
?
?CSS
/*滾動(dòng)條*/ .scroll { height: calc(100vh - 52px); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: auto; } /* 定義滾動(dòng)條樣式 */ ::-webkit-scrollbar { width: 5px; height: 10px; background-color: #195fab; } /*定義滾動(dòng)條軌道 內(nèi)陰影+圓角*/ ::-webkit-scrollbar-track { box-shadow: inset 0 0 0px #072E97; border-radius: 10px; background-color: #195fab; } /*定義滑塊 內(nèi)陰影+圓角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); background-color: rgba(240, 240, 240, .5); }
效果呈現(xiàn),長(zhǎng)度超過(guò)屏幕,自動(dòng)顯示豎向滾動(dòng)條
?
本文摘自 :https://www.cnblogs.com/