javascript - 如何改变滚动条的颜色？

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

但是在这里我无法更改滚动条的颜色。如何更改颜色？演示

score 4 · Accepted Answer

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

.jspTrack {
    background: lightgray !important;
}

.jspDrag {
    background: gray !important;
}

编辑：真正确保应用颜色。

score 2 · Accepted Answer

您可以对拖动元素进行样式化.jspDrag：

.jspDrag {
    background-color: #000;
}

和 scollbar.jspVerticalBar本身：

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

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

score 1 · Accepted Answer

这可能会对您有所帮助。对于特定的类或 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 ) 滚动条轨道颜色

score 0 · Accepted Answer

试试这个：

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

score 0 · Accepted Answer

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

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

除了上面的样式，你还会有 scrollbarShadowColor、scrollbarHighlightColor、scrollbar3dlightColor、scrollbarDarkshadowColor 等。所以，选择你的滚动条组件并改变它的颜色。

javascript - 如何改变滚动条的颜色？

5 回答 5

Related