CSS:可以将Webkit滚动条"推送"到内容中吗？

Question

通常滚动条的位置如下:

________________________________________
|                          |           |
|         content          | scrollbar |
|                          |           |
|                          |           |
|                          |           |
|                          |           |
|__________________________|___________|

我基本上希望在"自定义"滚动条和可滚动容器的外边界之间有一个间隙:

________________________________________
|                    |           |     |
|      content       | scrollbar | gap |
|                    |     <     |     | 
|                    |           |     |
|                    |           |     |
|                    |           |     |
|____________________|___________|_____|

使用margin-righton ::-webkit-scrollbar或者::-webkit-scrollbar-track-piece失败并且为Webkit声明样式滚动条的声明:

沿滚动条的轴支持边距.它们可以是负的(例如,轨道可以例如被充气以部分地覆盖按钮).

我现在想知道是否有人设法通过其他方式将滚动条"推入"内容(或包含在内容中)margin.

我假设这可能只是(甚至)使用某种技巧 - 任何想法？

我已经尝试过失败其他的事情是padding-right: 10px和border-right: 10px solid rgba(255, 255, 255, 0)(透明边框).

Answer 1

你可以使用透明边框.但是你需要设置background-clip: padding-box;或不起作用.

示例:http://jsfiddle.net/6KprJ/1/

Answer 2

我认为通过为右对齐滚动条分配右边距是不可能的.滚动条是窗口UI的一部分,可能无法通过CSS设置样式.

但是,你可以围绕HTML的所有其他元素创建一个内容包装器,给它一个最大宽度,小于100%,并overflow: scroll;为包装器设置.这将达到预期的效果,并且几乎适用于所有浏览器.

[个人意见]我认为某些网页设计师是一个非常糟糕的习惯,他们希望控制我的每一块屏幕.例如,滚动条应由窗口管理器设置样式,而不是由我当前正在查看的网站设置样式.