簡單的上一個和下一個按鈕，用於水平滾動到下一個div jQuery

Question

（我知道以前對此主題有過一些疑問，但根據我的情況，我似乎無法使其正常工作。）我希望既可以水平滾動某些文本，也可以使用'previous '和'next'按鈕可幫助您瀏覽文本（文本分為多個div）。 我希望用戶能夠始終切換。 我知道有些解決方案可以為div設置一個活動的類，但這似乎不適用於滾動。

創建“下一個”按鈕似乎不是問題，但我不知道如何使上一個按鈕正常工作。

這是我到目前為止對jsfiddle的了解

$(document).ready(function(){
$('#next').click(function() {
   var target;
   $(".section").each(function(i, element) {
     target = $(element).offset().left;
     if (target - 10 > $(document).scrollLeft()) {
       return false; 
     }});
   $("html, body").animate({
     scrollLeft: target
}, 500);
});
});

我還找到了下一個按鈕不起作用的解決方案，但似乎使它過於復雜（或者也許確實有必要添加更多的div，並使jQuery對我來說非常困難） jsfiddle

    var currentElement = $("#bodytext > div:nth-child(2)");
var onScroll = function () {
    var container = $("#main");
    var bodytext = $("#bodytext");
    var children = $(".section");
    var position = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        var childLeft = container.offset().left < child.offset().left;
        if (childLeft) {
            currentElement = child;
            console.log(currentElement);
            return;
        }
    }
};

var scrollToElement = function ($element) {
    var container = $("#main");
    var bodytext = $("#bodytext");
    var children = $(".section");
    var width = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        if (child.get(0) == $element.get(0)) {
            if (i === 0) {
                width = 0;
            }
            container.animate({
                scrollLeft: width
            }, 500);
            onScroll();
        }
        if (child.next().length > 0) {
            width += child.next().offset().left - child.offset().left;
        } else {
            width += child.width();
        }
    }
};

var next = function (e) {
    scrollToElement(currentElement);
}

var previous = function (e) {
    var container = $("#main");
    if (currentElement.prev().length > 0) {
        if (container.offset().left == currentElement.prev().offset().left) {
            currentElement = currentElement.prev().prev().length > 0 ? currentElement.prev().prev() : currentElement.prev();
        } else {
            currentElement = currentElement.prev();
        }
    }
    scrollToElement(currentElement);
};

$("#main").scroll(onScroll);
$("#next").click(next);
$("#previous").click(previous);

您可能會認為我可以結合使用這兩種解決方案，由於某種原因，這些解決方案目前暫時無法正常工作，但理想情況下，我想找到一個相當簡單/干凈的jQuery解決方案。 如果有人有任何想法，將不勝感激。 謝謝！

Answer 1

scrollLeft()和scrollTop()工作方式是將滾動方向定位為左側或頂部像素數。 因此，如果您主持小提琴並轉到$(document).scrollLeft(500) ，則會看到向左移動。 與$(document).scrollTop()向下滾動相同。

所以我會嘗試這樣的事情：

為上一個和下一個按鈕提供相同的類，例如#scrollButton ，並跟蹤用戶在JavaScript中的滾動位置。

$('#scrollButton').click(function() {
//logic to find out which button you clicked, perhaps from an ID

//logic here to find out where the user is
   var target = //that location;

//scroll to that location +/- X pixels, depending on which button you clicked...then just use your reassigned target

   $("html, body").animate({
     scrollLeft: target
}, 500);
});

如果用戶使用兩種滾動方式，則將中斷，但是如果您開始偵聽滾動事件，則可以同時跟蹤兩種滾動事件。

您不清楚如何滾動。 看起來您似乎還沒有定論，但這也許可以幫助您入門。 https://api.jquery.com/scroll/

您基本上是在尋找事件並做同樣的事情。 您已完成大部分任務！