我想让网站在 Y 轴上的三个不同位置之间滚动。问题是滚动事件侦听器会触发多个事件，因此 UI 行为不稳定。
我尝试对其进行去抖动，但无论等待变量有多高，我仍然会触发多个事件。我也尝试使用计数变量，但这仍然会打开一个足够大的窗口来触发多个事件。
有没有办法控制这种行为，所以我可以以一种干净且受控的方式在三个 pageYoffset 点之间滚动？
我的代码如下..
HTML
<div id="inbetween_one"></div>
<div id="second_part_page"></div>
</body>
CSS
html {
background: #e6e9e9;
background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);
-webkit-font-smoothing: antialiased;
}
#first_part_page{
height: 50vh;
background: blue;
}
#inbetween_one{
height: 20vh;
background: white;
}
#second_part_page{
height: 50vh;
background: blue;
}
JAVASCRIPT
var count = 0;
var lastScrollTop = 0;
if (count == 0){
count = 1;
window.addEventListener("scroll", debounce(function(){
var st = window.pageYOffset || document.documentElement.scrollTop;
// scroll down code
if (st > lastScrollTop){
if (window.pageYOffset < 10){
console.log("down first");
$("#first_part_page").velocity("scroll", {delay : 200, duration : 1300, offset: 400});
}
else if (window.pageYOffset > 300){
console.log("down second");
$("#first_part_page").velocity("scroll", {delay : 200, duration : 1300, offset: 1400});
}
// scroll up code
} else if (st <= lastScrollTop) {
if (window.pageYOffset < 600){
console.log("up first");
$("#first_part_page").velocity("scroll", {delay : 200, duration : 1300, offset: 0});
}
else if (window.pageYOffset > 1000){
console.log("up second");
$("#first_part_page").velocity("scroll", {delay : 200, duration : 1300, offset: 400});
}
}
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false), 1000);
// timeout to prevent the function from repeating for x milliseconds
setTimeout(function(){
count = 0;
}, 3000);
}
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};