我正在使用按钮滚动到下一个div的某些网页上工作。我可以让它在每个页面上工作,除了在这个特定的实例中(参见jsfiddle)。
我的问题是按钮不能在加载页面时工作,用户首先必须在按钮工作之前手动开始滚动。我假设这是因为我的jQuery编码有些错误,我一遍又一遍地看着,但我似乎无法找到问题所在。是否有人比jQuery更熟悉jQuery谁可以为我提供解决方案?
http://jsfiddle.net/y5wx7nst/3/
$(document).ready(function () {
var currentElement = $("#bodytext > div:nth-child(1)");
var onScroll = function () {
var container = $("#bodytext");
var children = $(".section");
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 = $("#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 buttonright = function (e) {
scrollToElement(currentElement.next());
};
var buttonleft = function (e) {
var container = $("#bodytext");
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);
};
$("#bodytext").scroll(onScroll);
$("#buttonright").click(buttonright);
$("#buttonleft").click(buttonleft);
});
答案 0 :(得分:0)
您最初滚动后只调用onScroll()函数:
$("#bodytext").scroll(onScroll);
我在声明之前添加了这个并且一切正常:
onScroll();
jsfiddle:http://jsfiddle.net/y5wx7nst/5/
答案 1 :(得分:0)
当currentElement的代码运行值不正确时。所以你应该计算它调用函数onScroll();
...
$("#bodytext").scroll(onScroll);
$("#buttonright").click(buttonright);
$("#buttonleft").click(buttonleft);
onScroll();
});