css - 如何在不更改浏览器滚动条的情况下设置页内滚动条的样式？

Question

我有一个使用 overflow: scroll 的可滚动 div。

我想在此 div 中设置滚动条的样式，但我添加的样式也会更改浏览器滚动条。如何调整它以便只有页内滚动条发生变化？

注意:请在 Chrome 中测试，因为这是我目前测试过的，滚动条样式在 Firefox 中不起作用。

代码笔: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

在-webkit代码前添加类.scroll

.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;
}