jquery - 如何在所有浏览器的右侧使正文滚动条时尚？

Question

我正在创建一个模板。我想更改右侧正文默认滚动条的设计。我想让它变得时尚，使其适用于所有浏览器。

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

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

此致

阿亚兹

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

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