Y 軸上の 3 つの異なる位置の間で Web サイトをスクロールさせたいと考えています。問題は、スクロール イベントリスナーが複数のイベントを発生させるため、UI の動作が不安定なことです。
私はそれをデバウンスしようとしましたが、待機変数がどれほど高くても、複数のイベントが発生します..カウント変数も使用してみましたが、それでも複数のイベントを発生させるのに十分な大きさのウィンドウが開きます.
この動作を制御して、3 つの 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;
}
ジャバスクリプト
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);
};
};