Question

我想更改滚动条的颜色。为了创建滚动条，我使用了给定的代码 javascript是

$('.scroll-pane').jScrollPane();


    $('#body').bind(
    'jsp-scroll-y',
    function (event, scrollPositionY, isAtTop, isAtBottom) {
        console.log('#pane1 Handle jsp-scroll-y', this,
                        'scrollPositionY=', scrollPositionY,
                        'isAtTop=', isAtTop,
                        'isAtBottom=', isAtBottom);
    }
);

css是

.scroll-pane
{
    width: 100%;
    height: 300px;
    overflow: auto;
}

但是在这里我无法改变滚动条的颜色。我怎样才能改变颜色？ Demo

Answer 1

这两个元素基本上就是滚动条和拖动处理程序。

.jspTrack {
    background: lightgray !important;
}

.jspDrag {
    background: gray !important;
}

编辑：确实确保颜色得到应用。

Answer 2

您可以设置拖动元素.jspDrag：

的样式

.jspDrag {
    background-color: #000;
}

和滚动条.jspVerticalBar本身：

.jspVerticalBar {
    background-color: rgba(0,0,0,0.5);
}

<强> UPD 工作示例http://jsfiddle.net/KVyAG/2/

Answer 3

这可能会对你有所帮助。对于特定的类或ID ，您只需输入类或ID 的名称，而不是 BODY

 <style type="text/css">
    BODY{
    scrollbar-face-color:#DFFFBF;
    scrollbar-shadow-color:green;
    }
    </style>

您还可以使用以下属性：

1）scrollbar-3dlight-color 2）scrollbar-arrow-color 3） scrollbar-base-color 4）scrollbar-darkshadow-color 5） scrollbar-face-color 6）scrollbar-highlight-color 7） scrollbar-shadow-color 8）scrollbar-track-color

Answer 4

试试这个：

.scroll-pane
 {
 width: 100%;
  height: 300px;
  overflow: auto;
  background-color:#000000;
}

Answer 5

我们也可以使用javascript更改滚动条的颜色。滚动条中有各种组件，如基色，面颜色，箭头颜色等，可以改变滚动条各部分的颜色。以下几行可能会对您有所帮助。

document.body.style.scrollbarBaseColor = "colorname";
document.body.style.scrollbarArrowColor = "colorname";
document.body.style.scrollbarTrackColor = "colorname";

除了上述样式之外，您还将拥有scrollbarShadowColor，scrollbarHighlightColor，scrollbar3dlightColor，scrollbarDarkshadowColor等。因此，选择滚动条的组件并更改其颜色。

如何更改滚动条的颜色？

5 个答案: