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

（我知道以前有一些关于这个主题的问题，但我的情况下似乎无法解决。）我希望既能水平滚动一些文本，又能使用“上一页”和“下一页”按钮帮助浏览文本（文本被分成多个div）。我希望用户能够随时切换。我知道有些解决方案提供将活动类设置为视图中的div，但这似乎不适用于滚动

创建“下一步”按钮似乎不是问题，但我不知道如何使上一步按钮正常工作

这就是我到目前为止所做的

我还发现，这个解决方案中的“下一步”按钮不起作用，但它似乎过于复杂了（或者可能确实需要添加更多div，使jQuery对我来说非常难以理解）

var currentElement=$（“#bodytext>div:nth child（2）”；
var onScroll=函数（）{
变量容器=$（“#主”）；
var bodytext=$（“#bodytext”）；
var children=$（“.section”）；
var位置=0；
对于（变量i=0；i0）{
宽度+=child.next（）.offset（）.left-child.offset（）.left；
}否则{
宽度+=子.width（）；
}
}
};
var next=函数（e）{
scrollToElement（当前元素）；
}
var previous=函数（e）{
变量容器=$（“#主”）；
如果（currentElement.prev（）.length>0）{
if（container.offset（）.left==currentElement.prev（）.offset（）.left）{
currentElement=currentElement.prev（）.prev（）.length>0？currentElement.prev（）.prev（）：currentElement.prev（）；
}否则{
currentElement=currentElement.prev（）；
}
}
scrollToElement（当前元素）；
};
$（“#主”）。滚动（onScroll）；
$（“#下一步”）。单击（下一步）；
$（“#上一页”）。单击（上一页）；

您可能会认为我可以将这两种解决方案结合起来，但出于某种原因，目前这两种解决方案都不起作用，但理想情况下，我希望找到一种相当简单/干净的jQuery解决方案。如果有人有任何想法，我们将不胜感激。谢谢

向左滚动（）

和

scrollTop（）

将滚动方向设置为向左或向上的像素数。所以，如果你把小提琴放在主机上，然后转到

$（文档）。向左滚动（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);
});

如果用户使用两种滚动，这将中断，但是如果您开始监听滚动事件，您将能够跟踪这两种事件

您的问题不清楚如何进行滚动。看起来你还没有给它一个可靠的机会，但也许这可以让你开始。

---

你基本上是在寻找事件并做同样的事情。你已经走到那里了

谢谢你的帮助，这让我更清楚我要做什么。我对这一点很陌生，在这一点上，这一切只是非常混乱，但无论如何，谢谢！

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

$('#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);
});