Disable scrolling for 0.5 seconds after the user scrolls once in JavaScript

Question

I have a resizing header with heigth:100%. I need to disable scrolling for 0.5 seconds after the user scrolls once. Is there any way to do that in JavaScript ?

Here is my code:

<script>
    function init() {
        window.addEventListener('scroll', function(e){
            var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                shrinkOn = 50,
                header = document.querySelector("header");
            if (distanceY > shrinkOn) {
                classie.add(header,"smaller");         
            } else {
                if (classie.has(header,"smaller")) {
                    classie.remove(header,"smaller");
                }
            }
        });
    }
    window.onload = init();
</script>

I would encourage you not to disable scrolling, ever. Why? The user may think that his mouse is broken, then punch his computer then... in summary it's a bad user experience to do that. — Frederik.L, Jun 05 '16 at 00:43

score 0 · Answer 1 · edited May 23 '17 at 12:31

I would recommend checking out the accepted answer to this question: How to disable scrolling temporarily? To make this disabling temporary, one strategy would be to set the event handlers mentioned in the answer, then use setTimeout with a duration of 500 milliseconds. The callback function within your setTimeout could then remove the event handlers. Thus, after a delay, browser behavior would return to normal.

Angel Politis · Accepted Answer · 2016-06-05T00:47:39.953

With the script below, if the user starts scrolling the function will be triggered and it will disable scrolling after 0.5 seconds.

<script>
    window.onload = function() {
        window.addEventListener('scroll', function(){
            setTimeout(function() {
                var header = document.getElementById("header");
                header.style.overflow = "hidden";
            }, 500 /* miliseconds */);
    };
</script>

If you want to disable scrolling for 0.5s after the user starts scrolling you can use this:

<script>
    window.onload = function() {
        window.addEventListener('scroll', function(){
            var header = document.getElementById("header");
            header.style.overflow = "hidden";
            setTimeout(function() {
                header.style.overflow = "auto";
            }, 500 /* miliseconds */);
    };
</script>

Disable scrolling for 0.5 seconds after the user scrolls once in JavaScript

2 Answers2