javascript - 单击上一个按钮时水平滚动向左和向右移动

Question

我试图在单击下一个和上一个按钮时左右移动水平滚动条。我面临的问题是，单击下一个或上一个按钮时，滚动会快速左右移动。

重现我的问题:https://jsfiddle.net/arunslb123/gzaLydkd/

1. 只需点击第 36 个问题
2. 点击“上一步”按钮 10-15 次。
3. 您可以看到水平滚动条到处移动。

如何解决这个问题？

function select($elem) {
$(".numberItem").removeClass("selected");
$elem.addClass("visited").addClass("selected");
focus($elem[0]);
}

function focus(elem) {
var stripPos = $strip.position(),
    numPos = $(elem).offset(),
    elemWidth = $(elem).width() + margin,
    numRight = numPos.left + elemWidth;

if (numRight > wrapWidth) {
    $strip.css({"left": stripPos.left - elemWidth});
  }
if (numPos.left < (margin + $leftArrow.width()))  {
    $strip.css({"left": stripPos.left + elemWidth});
 }
}

$(".controls").on("click", ".button", function() {
var $sel = $(".selected"), numPos, $sel, elemWidth;
  $elem = $sel.length > 0 ? $sel.first() : $(".numberItem").first();
if (this.id == "lft") {
    $sel = $elem.prev().length > 0 ? $elem.prev() : $elem;
    select($sel);
} else {
    $sel = $elem.next().length > 0 ? $elem.next() : $elem;
    select($sel);
}
numPos = $sel.offset(); elemWidth = $sel.width() + margin;
numRight = numPos.left + elemWidth;
if (numPos.left > wrapWidth) {
    $strip.css({"left": -($sel.text()) * $sel.width() });
}
if (numRight < 0) {
    $strip.css({"left": +($sel.text()) * $sel.width() });
}
});

Answer 1

在动画队列声明停止之前，每次单击按钮时都会调用动画

您可以在 .animate() 之前使用 .stop() 来实现这一点

$("#left-arrow").click(function () {
  var leftPos = $('#numWrap').scrollLeft();
$("#numWrap").stop().animate({scrollLeft: leftPos - 200}, 800);
});

$("#right-arrow").click(function () {
  var leftPos = $('#numWrap').scrollLeft();
$("#numWrap").stop().animate({scrollLeft: leftPos + 200}, 800);
});