仅使用 CSS 在垂直滚动条的右侧填充

Question

仅当垂直滚动条可见时，如何才能向我的元素添加右内边距（例如 8px）？我想避免添加标准填充来保持元素的对称性。就我而言，我使用

overflow-y

作为

auto

和列 Flexbox。

为了说明我的目标：

我知道我可以比较

scrollHeight

和

clientHeight

来确定垂直滚动条的可见性。但是，我想在不使用 JavaScript 的情况下仅使用 CSS 属性来实现此目的。我尝试找到一些 CSS 属性，例如

scroll-padding-right

或

scroll-margin-right

，但根据它们的名称，它们似乎无法按照我的预期工作。我还尝试给滚动条、滚动条拇指、滚动条轨道等添加左边距，但我无法实现我的目标。

是否可以仅使用CSS实现滚动条填充？

提前致谢。

Answer 1

仅使用CSS，不可能选择溢出的内容（尽管已经讨论了[selectors-5]伪选择器的提案：overflowed-content，但它会导致循环定义）。

但是您可以使用

::-webkit-scrollbar

和

::-webkit-scrollbar-track

属性向滚动条添加边距（选择器

::-webkit-scrollbar-thumb

、

box-shadow

和

border

）。