我的问题可能很简单。如何循环这个函数? 现在,滚动事件仅有效一次。我正在寻找如何启用 else 功能的解决方案(平滑滚动从红色 div 到蓝色 div)
这是js代码:
var o = true;
if (o === true) {
$('div').scroll(function () {
if(o){
$('div').animate({
scrollTop: $("#red").offset().top
}, 1000);
o=false;
}
});
}
else {
$('div').scroll(function () {
if(o === false ){
$('div').animate({
scrollTop: $("#blue").offset().top
}, 1000);
o=true;
document.write(o);
}
});
}
HTML + CSS + JS: https://jsfiddle.net/g2jafoay/6/
我要找的是:当你向下滚动时,有动画带你到红色 div。所以,我想添加动画,在向上滚动后将您带到蓝色 div
最佳答案
记住代码何时执行。即:当达到时。
我们可以将您的代码简化为
let a = true;
if (a) {
functionA();
} else {
functionB();
}
显然,当我们到达这段代码时,functionA
将被执行。我们永远不会执行functionB
,因为,这个代码永远不会再次执行。
使用此信息并查看您的代码,我们发现您仅附加了第一个滚动处理程序,该处理程序具有滚动到红色 div 的行为。滚动处理程序在每个滚动事件上执行。如果您像现在一样成功执行代码,您最终会得到无数个尝试滚动到红色 div 的滚动处理程序和无数个尝试滚动到蓝色 div 的滚动处理程序。
我们想要做的是只创建一个滚动处理程序,该处理程序内包含所有相关逻辑。或者,换句话说,决定是在滚动处理程序中而不是周围的代码中做出的。
let onRed = true;
$('div').on('scroll', () => {
let scrollTarget;
if (onRed) {
scrollTarget = $('#blue');
} else {
scrollTarget = $('#red');
}
$('div').animate({
scrollTop: scrollTarget.offset().top
}, 1000);
onRed = !onRed;
});
关于javascript - 如何循环滚动事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47659573/