如何为 CSS webkit 滚动条添加边距？

Question

我想在滚动条和屏幕右边缘之间创建一个间隙。

我如何实现这一目标？

原文由 user3757637 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

还有另一种解决方案可能很容易适合每个人的项目。如果您使用透明边框作为边距并使用带有插图的框阴影来设置它的颜色，您将获得您希望的结果。

例如：

 ::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px 10px green;
    border: solid 3px transparent;
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 10px 10px red;
    border: solid 3px transparent;
}

这可能是一个丑陋的滚动条，但它可以作为我的意思的一个例子。

但是，在 Chrome 中，透明属性不起作用，因此您必须手动插入适合背景的颜色，最好是背景色。

原文由 Victor Mendizabal Coelho 发布，翻译遵循 CC BY-SA 4.0 许可协议