使用 Next/Previous 按钮添加滚动到水平 UL 列表答案

【问题标题】：Add scrolling to horizontal UL list with Next/Previous buttons使用 Next/Previous 按钮添加滚动到水平 UL 列表
【发布时间】：2013-04-12 07:06:14
【问题描述】：

我想将下一个/上一个按钮添加到我的水平滚动列表中。我关注了这个帖子：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/

【问题讨论】：

标签： jquery html-lists horizontal-scrolling

【解决方案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; }

【讨论】：

【解决方案2】：

或者，如果您只是想要一个可以自定义样式的小插件形式的自定义滚动条，我会推荐这个：http://jamesflorentino.github.io/nanoScrollerJS/

【讨论】：

【解决方案3】：

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

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

我使用了以下代码：

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

【讨论】：