Question

我想将下一个/上一个按钮添加到水平滚动列表中。我关注过这篇文章：Using jQuery to add scrolling to a flat UL list

但它对我不起作用，请查看这个小提琴：http://jsfiddle.net/PrasadJadhav/45zyu/3/

我尝试使用：

ul {
    white-space: nowrap;
}

我不希望使用以下内容显示完整列表的滚动条：

overflow : scroll;
/* OR */
overflow : auto;

有没有可以解决这个问题的Jquery插件？

更新
我们可以这样做：http://jsfiddle.net/2Hr4U/

Answer 1

您是否期待

http://jsfiddle.net/45zyu/4/

.tabmenu {position: absolute; top: 40px; left: 0px; width:500px;height:30px; border:1px olid green; white-space: nowrap; height: 50%; overflow: auto; }

.tabmenu ul {list-style: none;  white-space: nowrap; margin:0px;  display: inline-block;}

.tabmenu ul li { display: inline-block; float: left; position: relative; background: #4b6592 }
.tabmenu ul li a { display: inline-block; color: #fff; }

.tabmenu ul li a span { display: block; padding: 9px 15px 9px 10px;  font-size: 10px; }

Answer 2

或者，如果您只想要一个可以设置样式的小插件形式的自定义滚动条，我建议使用这个：http://jamesflorentino.github.io/nanoScrollerJS/

Answer 3

我找到了使用此插件的解决方案：Smooth Div Scroll.

检查这个工作小提琴：http://jsfiddle.net/PrasadJadhav/2Hr4U/804/

我使用了以下代码：

$("div.tabmenu").smoothDivScroll();

使用“下一个/上一个”按钮将滚动添加到水平UL列表

3 个答案: