jQuery scrollLeft不滚动

Question

我有一个容器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">&larr;</button>
<button id="right">&rarr;</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);
  });
});

Answer 1

您需要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将会"-="

Answer 2

完美运作

您需要提供offset()或position()。并为left属性设置动画。

$(document).ready(function() {
  $("#right").bind("click", function() {
    var position = $("#inside").position();
    $("#inside").animate({
      left: position.left - 100
    }, 1000);
  });
});
$("#left").bind("click", function() {
  var position = $("#inside").position();
  $("#inside").animate({
    left: position.left + 100
  }, 1000);
});

更正

1. 当你给float: left;时，你需要清除你的花车。请等到小提琴准备就绪......
2. 你没有在你的小提琴中加载jQuery。
3. 需要将position: relative;提供给UL。

小提琴：http://jsfiddle.net/BQPVL/9/

Answer 3

尝试使用此：http://jsfiddle.net/BQPVL/10/

$("#right").on("click", function () {
  $("#inside").stop(true, true).animate({
    left: '-=100'
  }, 1000);
});
$("#left").on("click", function () {
  $("#inside").stop(true, true).animate({
    left:'+=100'
  }, 1000);
});