如何自定义 iscroll.js 的滚动条样式？

Styling the scrollbar

So you don’t like the default scrollbar styling and you think you could do better. Help yourself! iScroll makes dressing the scrollbar a snap. First of all set the scrollbars option to 'custom':

var myScroll = new IScroll('#wrapper', {
    scrollbars: 'custom'
});

Then use the following CSS classes to style the little bastards.

• .iScrollHorizontalScrollbar, this is applied to the horizontal container. The element that actually hosts the scrollbar indicator.
• .iScrollVerticalScrollbar, same as above but for the vertical container.
• .iScrollIndicator, the actual scrollbar indicator.
• .iScrollBothScrollbars, this is added to the container elements when both scrollbars are shown. Normally just one (horizontal or vertical) is visible.

If you set resizeScrollbars: false you could make the scrollbar of a fixed size, otherwise it would be resized based on the scroller length.

下面通过一个实际案例来解释：

JavaScript部分

var myScroll;

function loaded () {
    myScroll = new IScroll('#wrapper', { scrollX: true, scrollbars: 'custom' });
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

CSS部分

/* Styled scrollbars */

.iScrollHorizontalScrollbar {
    position: absolute;
    z-index: 9999;
    height: 16px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    overflow: hidden;
}

.iScrollHorizontalScrollbar.iScrollBothScrollbars {
    right: 18px;
}

.iScrollVerticalScrollbar {
    position: absolute;
    z-index: 9999;
    width: 16px;
    bottom: 2px;
    top: 2px;
    right: 2px;
    overflow: hidden;
}

.iScrollVerticalScrollbar.iScrollBothScrollbars {
    bottom: 18px;
}

.iScrollIndicator {
    position: absolute;
    background: #cc3f6e;
    border-width: 1px;
    border-style: solid;
    border-color: #EB97B4 #7C2845 #7C2845 #EB97B4;
    border-radius: 8px;
}

.iScrollHorizontalScrollbar .iScrollIndicator {
    height: 100%;
    background: -moz-linear-gradient(left,  #cc3f6e 0%, #93004e 100%);
    background: -webkit-linear-gradient(left,  #cc3f6e 0%,#93004e 100%);
    background: -o-linear-gradient(left,  #cc3f6e 0%,#93004e 100%);
    background: -ms-linear-gradient(left,  #cc3f6e 0%,#93004e 100%);
    background: linear-gradient(to right,  #cc3f6e 0%,#93004e 100%);
}

.iScrollVerticalScrollbar .iScrollIndicator {
    width: 100%;
    background: -moz-linear-gradient(top, #cc3f6e 0%, #93004e 100%);
    background: -webkit-linear-gradient(top,  #cc3f6e 0%,#93004e 100%);
    background: -o-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
    background: -ms-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
    background: linear-gradient(to bottom,  #cc3f6e 0%,#93004e 100%);
}
/* end */

参考资料

• iscroll on npm
• iScroll demo: styled