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

Question

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

Answer 1

以下代码适用于 webkit

::-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); 
}

Answer 2

Bhoot 上面的代码有效，但我为拇指添加了背景颜色，因为我使用的是深色背景。

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

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

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color:#fff;
    -webkit-box-shadow: inset 0 0 6px rgba(90,90,90,0.7);
}

Answer 3

如果您尝试使用任何 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); 
}