滚动条定制

scrollbar

最近遇到一个需求要求定制滚动条：

chrome对于滚动条定制有很多相关css就能实现的伪类：

    ::-webkit-scrollbar              { /* 1 */ }
    ::-webkit-scrollbar-button       { /* 2 */ }
    ::-webkit-scrollbar-track        { /* 3 */ }
    ::-webkit-scrollbar-track-piece  { /* 4 */ }
    ::-webkit-scrollbar-thumb        { /* 5 */ }
    ::-webkit-scrollbar-corner       { /* 6 */ }
    ::-webkit-resizer                { /* 7 */ }
    :horizontal
    :vertical
    :decrement
    :increment
    :start
    :end 
    :double-button
    :single-button
    :no-button
    :corner-present
    :window-inactive

:horizontal

– The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation.

:vertical

– The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation.

:decrement

– The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view’s position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).

:increment

– The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view’s position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar).

:start

– The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb.

:end

– The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb.

:double-button

– The double-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons.

:single-button

– The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button.

:no-button

– Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track.

:corner-present

– Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present.

:window-inactive

– Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.)

我的自定义滚动条样式

.box-scroller{
    background:rgb(94, 128, 204);
}
.box-scroller::-webkit-scrollbar {
    box-shadow: inset 0 0 0 4px rgb(94, 128, 204);
    background: -webkit-linear-gradient(
        left, 
        #5e80cc 0%, 
        rgb(133,219, 218) 50%,
        #5e80cc 100%
    );
    width: 10px;
}
.box-scroller::-webkit-scrollbar-thumb {
    background: -webkit-linear-gradient(
        top, 
        rgba(0, 0, 0, 0) 29%,
        #85dbda 30%, 
        #85dbda 70%,
        rgba(0, 0, 0, 0) 71%
    );
}
.box-scroller::-webkit-scrollbar-thumb:hover {
    background: -webkit-linear-gradient(
        top,
        rgba(133, 219, 218,.2) 0%,
        rgba(0, 0, 0, 0) 29%, 
        #85dbda 30%, 
        #85dbda 70%,
        rgba(0, 0, 0, 0) 71%,
        rgba(133, 219, 218,.2) 100%
    );
}

定制结果如下
如下：