jquery - 具有自定义外观的跨浏览器内容滚动

Question

有一个水平滚动的 block

<div class="popular-items">
<div class="popular-wrapper">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div><!-- .popular-wrapper -->
</div><!-- .popular-items-->

.popular-items {
clear: both;
overflow: hidden;
}   
.popular-wrapper {
clear: both;
overflow-x: scroll;
overflow-y: hidden;
}
.popular-items ul {
 width: 1200px;
}
.popular-items li {
width: 238px;
height: 440px;
float: left;
text-align: center;
border: 1px solid red;
}

http://jsfiddle.net/DjHRs/3/

问题是滚动条必须和这个一模一样

如何将标准卷轴替换为自定义卷轴？可能有一些 jQuery 插件？或任何其他解决方案？

感谢任何帮助。

Answer 1

对于这项工作，我通常使用这个插件:http://jscrollpane.kelvinluck.com/ (有垂直和水平滚动的演示)

简单且可定制。 (但制作那条绿线可能需要更多的工作)