0

I want to have a website scroll between three different positions on the Y-axis.. Problem is that the scroll eventlistener fires multiple events, so the UI behaviour is shaky..

I tried debouncing it, but no matter how high the wait variable, I still get multiple events fired.. I also tried using a count variable, but this still opens up a window large enough to fire multiple events.

Is there a way to control this behaviour so I can just scroll between the three pageYoffset points in a clean and controlled way?

My code is the following..

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);
    };
};
Niels Vanwingh
  • 604
  • 1
  • 6
  • 22
  • you already created a question to this problem...use jquery plugins to handle the problem – A.A. Aug 21 '19 at 08:52
  • i understand your reasoning AA, I see it more as question one is the general question, this one the more specific.. :-) – Niels Vanwingh Aug 21 '19 at 08:56
  • hello Pete, I would like to keep the scroll behaviour in the app, the user needs to interact with it in a natural fashion before it actually moves.. otherwise this would impede the feedback mechanism the user expects.. – Niels Vanwingh Aug 21 '19 at 08:57

0 Answers0