Question

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

我无法弄清楚我做错了什么 - 沿着底部的月份链接应该带你到水平滚动div中的相应div，它有时会起作用，但大部分时间都会进入随机位置（特别是向后） / p>

演示比解释更容易，所以请在下面找到一个js小提琴。在那之下是js

一如既往，感谢任何建议 - 如果您需要更多信息，请告诉我

    $(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);

  });

});

Answer 1

部分问题在于，当您获得 position 时，您将获得相对于父级的信息。当您最初单击“六月”时，左侧位置为800，但在完成滚动后，六月的左侧位置现在为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);
});

Jquery scrollLeft滚动到随机位置

1 个答案: