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

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

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

您可以在.stop()之前使用.animate()来实现此目标

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

Answer 2

如果您将功能更改为以下内容，则应将下一个/上一个数字保留在视图中间：

$(".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.position(); 
    elemWidth = $sel.width() / 2;
    scroll = numPos.left + elemWidth - ($('#numWrap').width() / 2);
    $strip.animate({left: -scroll}, 800);
});

Updated fiddle

修改

当您正在混合移动一个绝对定位的div并滚动它的外部div时，会废弃以前的东西，这会导致各种各样的问题。如果您只是将您的js更改为以下内容，它应该达到您想要的效果：

// same as before
fillQuestion(40);

function fillQuestion(num){
    for (var i = 1; i <= num; i++) {
        var $d = $("<a href='#' class='numberItem'>" + i + "</a>");
        $("#strip").append($d);
    }
}

// after you have done your usual stuff, this is where the new code begins
var items = $('.numberItem'),
    selectedIndex = 0,
    scroller = $("#numWrap"),
    scrollerWidth = scroller.width();

selectItem();  // select first item - change the selected index var above to start on a different number

items.on('click', function(e) {
    e.preventDefault();  // prevent default action of link
    selectedIndex = items.index($(this)); // set new selected index to this index
    selectItem();
});

$('.controls .btn').on('click', function() {
    var button = $(this);
    if (button.hasClass('prev') && selectedIndex > 0) {
        selectedIndex--;
    } else if (button.hasClass('next') && selectedIndex < items.length - 1) {
        selectedIndex++;
    }

   selectItem();
});

function selectItem() {
    var selected = items.eq(selectedIndex); // set selected item to current selected index
    items.removeClass('selected');  // remove selected from any items
    selected.addClass('visited selected');  // add selected to current item
    focus(selected.position().left);
}

function focus(originalLeft) {
    scroll = originalLeft - (scrollerWidth / 2);
    scroller.stop().animate({
        scrollLeft: scroll
    }, 800);
}

Updated fiddle