如何更改引导程序中的滚动条样式？

Question

我正在使用 bootstrap 4。我想知道是否有办法更改滚动条样式。我刚刚尝试使用 webkit 模式，但不起作用。

原文由 flipps 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您尝试使用任何 div 或元素来自定义滚动条，请在 CSS 中分配和使用元素 ID，如下所示，

 <div class="cardsContainer" id="cards-container">

#cards-container::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
}

#cards-container::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(104, 140, 240, 0.3);
  }

#cards-container::-webkit-scrollbar-thumb {
    background-color: lightblue;
    outline: 1px solid slategrey;
}

上面的方式，它对我有用，即使当我尝试如下时它没有用，

 ::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

原文由 mramsath 发布，翻译遵循 CC BY-SA 4.0 许可协议