如何在所有浏览器的右侧制作时尚滚动条？

Question

我正在创建一个模板。我想改变右侧身体默认滚动条的设计。我想让它变得时尚，以至于它可以在所有浏览器中使用。

我附上了我想要的截图。在屏幕截图中，您将在右侧看到样式化的滚动条，而不是默认的浏览器滚动条。

如果有可能，请指导我，以及我们如何执行此操作。

最好的问候

Ayyaz

Answer 1

尝试使用css属性，

示例：

body {
    scrollbar-face-color: #DBDEE7;
    scrollbar-highlight-color: #DBDEE7;
    scrollbar-shadow-color: #A4A6AB;
    scrollbar-3dlight-color: #DBDEE7;
    scrollbar-arrow-color: #354274;
    scrollbar-track-color: #EDEEF2;
    scrollbar-darkshadow-color: #DBDEE7;
}

How to change the scrollbar color using css

jsFiddle：http://jsfiddle.net/hmartiro/Xck2A/1/

Answer 2

尝试在你的目标附近玩这个例子：

http://jsfiddle.net/simurai/UsvLN/

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}