How to add a class in vanilla JS for a limited time?

Question

I'd like to disable scrolling in JS for a few seconds. Right now I have this, but everytime I scroll the page it blocks for one second then the blocking stops, then I scroll and it blocks again, etc.

I'd like to have the blocking stopped only once after I scroll the page. This is my code:

HTML

<div class="cover" id="cover">
    ...
</div>

<div class="container" id="container">
    ...
</div>

JS

var scrollPosition = window.scrollY;
var cover = document.getElementsByClassName("cover")[0];

window.addEventListener("scroll", function () {
    scrollPosition = window.scrollY;

    if (scrollPosition >= 1) {
        cover.classList.add("cover-close");
        document.body.classList.add("stop-scrolling");
        setTimeout(function() {
            document.body.classList.remove("stop-scrolling");
        }, 1000);
    } else {
        cover.classList.remove("cover-close");
    }
});

Sass

.stop-scrolling 
    height: 100%
    overflow: hidden

Someone has a solution? Thanks!

Answer 1

I'd add a variable that checks if you've scrolled and blocked before.

var scrollPosition = window.scrollY;
var cover = document.getElementsByClassName("cover")[0];
var hasBlocked = false;

window.addEventListener("scroll", function () {
    scrollPosition = window.scrollY;

    if (scrollPosition >= 1) {
        cover.classList.add("cover-close");
        if (!hasBlocked) {
            hasBlocked = true;
            document.body.classList.add("stop-scrolling");
            setTimeout(function() {
                document.body.classList.remove("stop-scrolling");
            }, 1000);
        }

    } else {
        cover.classList.remove("cover-close");
    }
});