54

如何使用 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;
}
4

4 回答 4

120

设置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); 
}
​

看这个活生生的例子

于 2012-09-09T09:04:25.763 回答
1

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

于 2014-10-14T04:48:35.240 回答
0 
.scroll {
   width: 200px; height: 400px;
   overflow: auto;
}
于 2012-09-09T09:04:38.580 回答
0

你在设置overflow: hidden。这将隐藏任何对 来说太大的东西，<div>这意味着不会显示滚动条。给你<div>一个明确的宽度和/或高度，然后更改overflow为auto：

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

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

于 2012-09-09T09:08:02.107 回答