时间戳

首页 > 解决方案 > CSS：如何根据 class/id 自定义滚动条填充和边距

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

问题描述

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

/*
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，这将为每个滚动条放置不同的填充。

标签： htmlcss

解决方案

您可以像使用 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/

推荐阅读