单击上一个按钮时水平滚动左右移动 [英] Horizontal scroll moving left and right when clicking previous button

问题描述

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

I was trying to move the horizontal scroll left and right when clicking the next and previous button. The problem I'm facing is that the scrolling moves left and right fast when clicking the next or previous buttons.

要重现我的问题： 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() });
}
});

推荐答案

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

If you change your function to the following, it should keep the next / previous number in the middle of your view:

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

更新小提琴

编辑

当你混合移动一个绝对定位的div，滚动它的外部div，这将导致各种各样的问题。如果你只是改变你的js到以下，它应该实现你想要的：

Scrap the previous stuff as you are mixing moving an absolutely positioned div with a scrolling it's outer div and that will lead to all sorts of problems. If you just change your js to the following, it should achieve what you want:

// 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);
}

更新了小提琴

这篇关于单击上一个按钮时水平滚动左右移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！