javascript - 用于水平滚动到下一个 div jQuery 的简单上一个和下一个按钮

Question

(我知道以前有一些关于这个主题的问题，但我似乎无法在我的情况下完成这项工作。)我希望能够水平滚动一些文本，以及使用“上一个”和“下一个”按钮来帮助浏览文本(文本被分成许多 div)。我希望用户能够随时切换。我知道有些解决方案会为 View 中的 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() 通过将滚动定向到左侧或顶部的像素数来工作。因此，如果您拿起 fiddle 并转到 $(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/

您基本上是在查找事件并执行相同的操作。您已完成大部分工作!