Question

如何使用CSS3设置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); 
}

这是我的div标签

<div class="scroll"></div>

这是我目前的CSS

.scroll {
   width: 200px; height: 400px;
   overflow: hidden;
}

Answer 1

设置overflow: hidden会隐藏滚动条。设置overflow: scroll以确保滚动条始终显示。

要使用::webkit-scrollbar属性，只需在调用之前定位.scroll即可。

.scroll {
   width: 200px;
   height: 400px;
    background: red;
   overflow: scroll;
}
.scroll::-webkit-scrollbar {
    width: 12px;
}

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

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

直播example

Answer 2

.scroll {
   width: 200px; height: 400px;
   overflow: auto;
}

Answer 3

您正在设置overflow: hidden。这将隐藏任何对<div>来说太大的内容，这意味着不会显示滚动条。为您的<div>提供明确的宽度和/或高度，并将overflow更改为auto：

.scroll {
   width: 200px;
   height: 400px;
   overflow: scroll;
}

如果您只想在内容长于<div>时显示滚动条，请将overflow更改为overflow: auto。您也可以使用overflow-y或overflow-x显示一个滚动条。

Answer 4

css3滚动条的问题在于，只能对内容执行交互。我们无法与触摸设备上的滚动条进行互动。

div上的CSS3滚动条样式

4 个答案: