jquery - 仅使用两个元素样式化滚动条

Question

我正在尝试使用 NiceScroll 插件对滚动条进行样式化，除了它提供的参数之外，我还使用 css 来实现，问题是它创建了两个 HTML 元素，而我的设计“具有”三个元素。

这是我正在使用的参数：

$('.albums').niceScroll({
    cursorcolor: '#D289A6',
    cursorwidth: '10',
    cursorborder: '',
    cursorborderradius: '12px',
    background: '#fff'
});

这是滚动条的图像：

这是我为重现它而创建的 jsFiddle：http: //jsfiddle.net/YKhce/

我错过了白色的“栏杆”，我不想使用 :before 和 :after 伪元素，因为用户将主要在 IE 中使用它。

如何做到这一点？

Answer 1

你可以用 box-shadow 和轮廓绘制它：http:
//jsfiddle.net/ScndL/

#outter {
    width: 25px;
    height: 400px;
    background:white;
    border-radius:10px;
    box-shadow:inset -1px 0 0 10px #2956a1, 0 0 0 3px #2956a1;
    outline: solid 5px #2956a1;
    outline-offset:-2px
}

更新为方形 http://jsfiddle.net/ScndL/1/

#outter {
    width: 25px;
    height: 400px;
    background:white;
    box-shadow:inset -1px 0 0 10px #2956a1;
}