仅使用两个元素来设置滚动条的样式

Question

我正在尝试使用NiceScroll插件来设置滚动条的样式，除了它提供的参数之外，我正在使用css，事实是它创建了两个HTML元素，而设计我“拥有”了三个元素。 / p>

这是我正在使用的参数：

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

以下是滚动条的图片：

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

我错过了白色的“轨道”，我不想使用：之前和之后：伪元素，因为用户将主要在IE中使用它。

如何实现这一目标？

Answer 1

你可以用箱子阴影和轮廓绘制它：
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;
}