Html CSS3 div上的滚动条样式

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

---

设置

overflow:hidden

隐藏滚动条。设置溢出：滚动以确保滚动条始终显示

要使用

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

---

查看此实况

您正在设置的

溢出：隐藏

。这将隐藏任何对

来说太大的内容，这意味着不会显示滚动条。为

指定明确的宽度和/或高度，并将

溢出

更改为

自动

：

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

---

如果您只想在内容长度超过

时显示滚动条，请将

溢出

更改为

溢出：自动

。使用

overflow-y

或

overflow-x

也只能显示一个滚动条css3滚动条的问题是，只能对内容执行交互。我们无法与触摸设备上的滚动条进行交互。

溢出：隐藏

隐藏任何滚动条，因此没有什么可以用CSS3装饰的。您必须使用

overflow:scroll

或

overflow:auto

使滚动条可见，谢谢您的帮助。我们有没有办法对mozilla浏览器做同样的事情？没有jQuery/JavaScript不行。看到这个问题了吗

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

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