Question

我有一个带有自定义垂直滚动条的div框，我使用css / jquery设计了一个水平滚动条。我需要给出设计的滚动条的精确外观，特别是颜色。是否有任何jquery / javascript代码，我可以使用它来获取自定义滚动条的颜色。

Answer 1

:-webkit-scrollbar {
    width: 1em;

}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #989898);
}

::-webkit-scrollbar-thumb {
background: -moz-linear-gradient(90deg, rgba(153,218,255,0) 0%, rgba(210,106,120,1) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(210,106,120,1)), color-stop(100%, rgba(153,218,255,0))); /* safari4+,chrome */
background: -webkit-linear-gradient(90deg, rgba(153,218,255,0) 0%, rgba(210,106,120,1) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(90deg, rgba(153,218,255,0) 0%, rgba(210,106,120,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(90deg, rgba(153,218,255,0) 0%, rgba(210,106,120,1) 100%); /* ie10+ */
background: linear-gradient(0deg, rgba(153,218,255,0) 0%, rgba(210,106,120,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d26a78', endColorstr='#99DAFF',GradientType=0 ); /* ie6-9 *///outline: 1px solid #D17626;
  border-radius:5px;
}

Answer 2

通过css你只能设置-webkit支持的浏览器，因为firefox不支持使用nicescroll和其他插件在所有浏览器中实现滚动条css

::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background:#c0a062;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background:#c0a062; 
}

获取滚动条的颜色

2 个答案: