使用css改变滚动条样式 并使滚动条不贴边

Posted 2021-10-19 that-is-ok

客户说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的边！