使用鼠标滚轮和按钮循环水平滚动两个div

Question

我需要循环宽块的水平滚动。另外我需要用鼠标滚轮和按钮控制滚动。

我在codepen上创建了工作演示。

Demo on CodePen

这里我使用Endless.JS进行循环滚动（使用2个div和更多）和jquery.mousewheel用于鼠标滚轮支持。我也写了一些箭头代码。在悬停 - ＆gt;阻止开始用动画滚动。

animate({scrollLeft:'+=40'}

这种方法适用于鼠标滚轮，但我遇到了箭头问题。在我滚动前几个div之后，其他div变得眨眼并且像游戏中的神器一样工作:)（见演示）

你能帮帮我吗？也许我需要使用其他一些方法或lib？ 非常感谢。

Answer 1

你应该在这里避免使用jQuery.animate。不完全确定导致问题的原因，但使用超时似乎工作正常。这样，您还可以更好地控制延迟和动画速度。 http://codepen.io/anon/pen/zGbLB

  var timeout;

  function loop_next(){
    timeout = window.setTimeout(function() {
      container.scrollLeft(container.scrollLeft() + 2);
      loop_next();
    }, 20); 
  }
  function loop_prev(){
    timeout = window.setTimeout(function() {
      container.scrollLeft(container.scrollLeft() - 2);
      loop_prev();
    }, 20);
  }
  function stop(){
    window.clearTimeout(timeout);
  }