Горизонтальная прокрутка влево и вправо при нажатии предыдущей кнопки

Question

Я пытался перемещать горизонтальную прокрутку влево и вправо при нажатии следующей и предыдущей кнопки. Проблема, с которой я сталкиваюсь, заключается в том, что прокрутка движется влево и вправо быстро при нажатии следующей или предыдущей кнопок.

Чтобы воспроизвести мой вопрос: https://jsfiddle.net/arunslb123/gzaLydkd/

1. Просто нажмите вопросительный Num 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

Если вы измените выполните следующие действия: он должен сохранить следующий/предыдущий номер в середине вашего вида:

$(".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

Редактировать

Scrap предыдущий материал, как вы смешиваете перемещение абсолютно позиционированного 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

Answer 2

Анимация вызывался каждый раз, когда нажата кнопка, чтобы перед очередь анимации присваивает остановка

Вы можете использовать .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); 
});