(我知道以前有一些关于这个主题的问题,但我似乎无法在我的情况下完成这项工作。)我希望能够水平滚动一些文本,以及使用“上一个”和“下一个”按钮来帮助浏览文本(文本被分成许多 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 解决方案。如果有人有任何想法,那将不胜感激。谢谢!
最佳答案
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/
您基本上是在查找事件并执行相同的操作。您已完成大部分工作!
关于javascript - 用于水平滚动到下一个 div jQuery 的简单上一个和下一个按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29955848/