修改滾動條樣式, 并使滾動條不貼邊
// 修改滾動條樣式 ::-webkit-scrollbar { width: 10px; height: 10px; background-color: rgba(255, 255, 255, 0); } ::-webkit-scrollbar-thumb { border-top-left-radius: 6px; border-top-right-radius: 7px; border-bottom-left-radius: 6px; border-bottom-right-radius: 7px; border-right: 2px solid rgba(0, 0, 0, 0); box-shadow: 12px 12px 0 #b6b9bb inset; border-bottom: 2px solid rgba(0, 0, 0, 0); } ::-webkit-scrollbar-thumb:hover { box-shadow: 12px 12px 0 #76797d inset; }
好吧,還好可以修改滾動條的樣式(還好網站只針對谷歌瀏覽器),結果發現修改了滾動條的樣式之后滾動條緊貼著body。

客戶表示不滿意并說 mac的滾動條是有間隙的。好吧我再試試,結果發現在滾動條的偽類中比如padding,margin之類的并不生效。為了節省時間直接去網上搜了一圈發現都是講怎么修改樣式的,并沒有使滾動條“有間隙”的解決辦法(或許是我沒找到)。好吧好吧,看來只能自己想辦法,通過自己實驗發現border和box-shadow屬性是可以生效的,進而找到了解決辦法:
1、設置滾動條border為透明2、使用box-shadow填充背景顏色。
::-webkit-scrollbar 滾動條整體部分 ::-webkit-scrollbar-thumb 滾動條里面的小方塊,能上下左右移動(取決于是垂直滾動條還是水平滾動條) ::-webkit-scrollbar-track 滾動條的軌道(里面裝有thumb) ::-webkit-scrollbar-button 滾動條軌道兩端的按鈕,允許通過點擊微調小方塊的位置 ::-webkit-scrollbar-track-piece 內層軌道,滾動條中間部分(除去) ::-webkit-scrollbar-corner 邊角,及兩個滾動條的交匯處 ::-webkit-resizer 兩個滾動條的交匯處上用于通過拖動調整元素大小的小控件

浙公網安備 33010602011771號