[英]Scrolling button jQuery doesn't work instantly
我正在一些使用按鈕滾動到下一個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/
當currentElement的代碼運行值不正確時。 因此,您應該通過調用onScroll()函數來計算它;
...
$("#bodytext").scroll(onScroll);
$("#buttonright").click(buttonright);
$("#buttonleft").click(buttonleft);
onScroll();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.