我有一个容器div,里面有一个ul设置就像这个jsfiddle：
http://jsfiddle.net/BQPVL/1/
滚动为什么不工作？
HTML：
<div id="outside">
<ul id="inside">
<li>hi</li>
<li>how are you?</li>
<li>i am good.</li>
</ul>
</div>
<button id="left">←</button>
<button id="right">→</button>
CSS：
#outside {
width: 200px;
height: 50px;
overflow: scroll;
}
#inside {
width: 1000px;
}
#inside li {
background: red;
width: 99px;
height: 40px;
border-right: 1px solid black;
float: left;
padding: 5px;
}
jQuery的：
var position = $("#inside").scrollLeft();
$(document).ready(function() {
$("#right").bind("click",function() {
$("#inside").animate({
scrollLeft: position + 100
},1000);
});
});
解决方法
你需要scrollLeft具有overflow属性的元素,那就是你的#outside
jsBin demo
$(function() { // DOM READY shorthand
$("#right,#left").click(function() {
var dir = this.id=="right" ? '+=' : '-=' ;
$("#outside").stop().animate({scrollLeft: dir+'100'},1000);
});
});
如您所见,您可以将两个按钮附加到单击处理程序,并在其中检索单击的按钮ID.如果this.id返回“right”,则var dir将变为“=”,否则逻辑上你点击#left一个,dir将保持“ – =”