修改滾動條樣式，并使滾動條不貼邊

// 修改滾動條樣式
::-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 兩個滾動條的交匯處上用于通過拖動調整元素大小的小控件

posted @ 2022-06-22 20:50 simple-love 閱讀(786) 評論(0) 收藏舉報

刷新頁面返回頂部

simple-love

Figure out what you like. Try to become the best in the world of it.

修改滾動條樣式， 并使滾動條不貼邊

修改滾動條樣式，并使滾動條不貼邊