0

我正在尝试使用 scrollLeft 动画滚动水平 div

我无法弄清楚我做错了什么 - 底部的月份链接应该将您带到水平滚动 div 中的相应 div，它有时会起作用，但大部分时间会去随机的地方（特别是向后）

演示比解释更容易，所以请在下面找到一个 js fiddle。下面是js

与以往一样，我们非常感谢您的任何建议 - 如果您需要更多信息，请告诉我

http://jsfiddle.net/6J9Cc/

    $(document).ready(function(){

 $(".timenav a.may").click(function(){

      $('.hori').animate({scrollLeft:$('#may').position().left}, 800);

  });

   $(".timenav a.june").click(function(){

      $('.hori').animate({scrollLeft:$('#june').position().left}, 800);

  });

    $(".timenav a.july").click(function(){

      $('.hori').animate({scrollLeft:$('#july').position().left}, 800);

  });

    $(".timenav a.august").click(function(){

      $('.hori').animate({scrollLeft:$('#august').position().left}, 800);

  });

});
4

1 回答 1

2

部分问题在于，当您获得position时，您获得的是相对于父级的。当您最初单击“June”时，左侧位置为 800，但滚动完成后，June 的左侧位置现在为 0。当您滚动到零时，您将在开始时结束。

我想出的解决方案是在开始时将所有那些“左”位置保存到一个数组中。您可能还需要考虑使用offset，它是相对于文档的位置。

这是我的解决方案，清理了其他一些东西：http: //jsfiddle.net/BUyzY/1/

var posLeft = [
    $('#may').position().left
    ,$('#june').position().left
    ,$('#july').position().left
    ,$('#august').position().left
];
var $hori = $('.hori');

$('.timenav a').on("click",function(e){
    $this = $(this);
    $hori.stop().animate({
        scrollLeft: posLeft[ $this.data("month") ]
    }, 800);
});
于 2013-08-06T20:43:55.817 回答