如何为CSS Webkit滚动条添加边距? [英] How do I add a margin to a CSS webkit scrollbar?

问题描述

这是带有当前Webkit滚动条的我的网站: http://willwhitehead.com

Here's my site with the current webkit scrollbar: http://willwhitehead.com

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

I'd like to create a gap between the scrollbar and the right edge of the screen.

我该如何实现?

预先感谢

会

推荐答案

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

There's yet another solution which might fit easily in everybody's project. If you use a transparent border as a margin and a box-shadow with inset to set it's color, you'd get the result you are hoping for.

例如:

::-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;
}

这可能是一个难看的滚动条，但这只是我的意思的一个例子.

This may be an ugly scrollbar, but it serves as an example to what I mean.

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

However, in Chrome, the transparent property won't work, so you would have to manually insert the color that would fit with the background, preferably, the background-color.

这篇关于如何为CSS Webkit滚动条添加边距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！