CSS：如何根据 class/id 自定义滚动条填充和边距答案

【问题标题】：CSS: How to customize scroll bar padding and margin based on class/idCSS：如何根据 class/id 自定义滚动条填充和边距
【发布时间】：2020-01-29 08:42:37
【问题描述】：

我想要三种不同类型的滚动条，它们的填充和边距不同。下面是我的滚动条的全局样式：

/*
Modifying the scroll bar across the whole application
*/
/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    border-radius: 10px;
    width: 5px;
    height: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #999999 !important;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: #d1d1d1 !important;
    border: 1px solid #ebebeb !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #b30000;
}

现在我想使用类名或 id 使用具有不同填充和边距的滚动条。我不希望滚动条填充和边距影响滚动条中内容的填充和边距。如何以这种方式编写 css，为每个滚动条放置不同的填充。

【问题讨论】：

标签： html css

【解决方案1】：

您可以像使用 css 选择元素一样选择该元素。

选择容器 div 并像这样添加规则

<div class="container">
 <div class="innerdiv"></div>
</div>

.container {
   height: 300px;
   width: 300px;
   overflow-y: scroll;
}
.container .innerdiv {
   height: 600px;
   background:blue;
}
.container::-webkit-scrollbar {
    width: 3px;
}
.container::-webkit-scrollbar-thumb {
  background: black;
}
.container::-webkit-scrollbar-track {
    background: red;
}

这是一个工作示例 -> https://jsfiddle.net/2fzpoycv/

【讨论】：

【解决方案2】：

Look Here is an Example

and its also here

【讨论】：

【解决方案3】：

阅读此网址可能会解决您的问题https://css-tricks.com/almanac/properties/s/scroll-padding/

【讨论】：

滚动填充为可滚动 div 内的内容提供填充。我需要在滚动条周围留出间距而不影响内容填充。