javascript - 滚动Javascript

Question

我想让网站在 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);
    };
};

标签： javascriptcustom-scrolling