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

Question

（我知道之前有一些关于这个主题的问题，但我似乎无法在我的情况下完成这项工作。）我希望两者都能够水平滚动浏览一些文本，因为以及使用 'previous' 和 'next' 按钮来帮助浏览文本（文本被分成许多 div）。我希望用户能够随时切换。我知道有些解决方案提供将活动 class 设置为视图中的 div，但这似乎不适用于滚动。

创建一个 'next' 按钮似乎不是问题所在，但我不知道如何使上一个按钮正常工作。

这是我目前在 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);
});
});

我还发现了这个解决方案，其中下一个按钮不起作用，但它似乎过于复杂（或者可能真的有必要添加更多 divs 并使 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);

您可能会认为我可以将这两种解决方案结合起来，但出于某种原因，这目前还没有真正奏效，但理想情况下，我想找到一个相当 simple/clean jQuery 的解决方案。如果有人有任何想法，那将不胜感激。谢谢！

Answer 1

scrollLeft() 和 scrollTop() 通过将滚动定向到左侧或顶部的像素数来工作。因此，如果您托管 fiddle 并前往 $(document).scrollLeft(500)，您会看到向左移动。与 $(document).scrollTop().

向下滚动相同

所以我会尝试这样的事情：

给上一个和下一个按钮相同的 class，如 #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/

你基本上是在寻找事件并做同样的事情。您已完成大部分内容！

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

Simple previous and next button for horizontal scrolling to next div jQuery

javascript

jquery

html

css

horizontal-scrolling