使用css改變滾動條樣式 並使滾動條不貼邊

客戶說mac下的滾動條很好看，他想讓網站的滾動條在windows下也跟mac一樣。

好吧，還好可以修改滾動條的樣式（還好網站只針對谷歌瀏覽器），結果發現修改了滾動條的樣式之后滾動條緊貼着body。

客戶表示不滿意並說 mac的滾動條是有間隙的。好吧我再試試，結果發現在滾動條的偽類中比如padding，margin之類的並不生效。為了節省時間直接去網上搜了一圈發現都是講怎么修改樣式的，並沒有使滾動條“有間隙”的解決辦法（或許是我沒找到）。好吧好吧，看來只能自己想辦法，通過自己實驗發現border和box-shadow屬性是可以生效的，進而找到了解決辦法：

1、設置滾動條border為透明2、使用box-shadow填充背景顏色。

代碼如下：

::-webkit-scrollbar {
    width: 20px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 12px;
    border: 6px solid rgba(0, 0, 0, 0);
    box-shadow: 8px 0 0 #A5ADB7 inset;
}

::-webkit-scrollbar-thumb:hover {
    box-shadow: 8px 0 0 #4A4A4A inset;
}

效果如下圖：

並沒有貼着body的邊！