我正在处理一些使用按钮滚动到下一个 div 的网页。我可以让它在每个页面上工作,除了这个特定的实例(参见 jsfiddle)。
我的问题是按钮在加载页面时不起作用,用户首先必须手动开始滚动,按钮才能起作用。我假设这是因为我的 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);
});
最佳答案
您只在最初滚动后调用 onScroll() 函数:
$("#bodytext").scroll(onScroll);
我在该声明之前添加了这个并且一切正常:
onScroll();
jsfiddle:http://jsfiddle.net/y5wx7nst/5/
关于javascript - 滚动按钮 jQuery 不能立即工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30378433/