如何在不改变浏览器滚动条的情况下对页面内滚动条进行样式设计？

Question

我有一个可滚动的div，它使用溢出:滚动。

我想在这个div中设置滚动条的样式，但是我添加的样式也会更改浏览器滚动条。如何调整它，使只有页面中的滚动条更改？

Note：请在Chrome中进行测试，因为到目前为止我已经测试过了，滚动条样式在火狐中不起作用。

Codepen：https://codepen.io/anon/pen/ZMdBQQ

CSS

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

::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white; 
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #ADADAD;
}

::-webkit-scrollbar-thumb:window-inactive {
    background: #ADADAD;
}

Answer 1

在.scroll代码之前添加类-webkit

.scroll::-webkit-scrollbar {
    width: 16px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white; 
}

.scroll::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px;
   border-radius: 10px;
   background: #ADADAD;
}

.scroll::-webkit-scrollbar-thumb:window-inactive {
    background: #ADADAD;
}

Answer 2

只需将其限制为.scroll元素，如下所示：

.scroll::-webkit-scrollbar {
    width: 16px;
}

https://codepen.io/anon/pen/yxdgmq

Answer 3

这可能有点棘手，因为这取决于浏览器。通常，人们用div元素(使用JS描述其行为)和真实滚动条绘制自己的“滚动条”，然后添加~22px以块宽度，并添加CSS属性overflow: scroll-y。

更新：，我为您找到了一些简单脚本。