limited scroll at a time

PIYUSH PUNIYA 0
Viewed 37

Suppose I have 5 divs with 100vh height each in a container.

<div class="mycontainer" >
    <div id="diview0" class="diview">0</div>
    <div id="diview1" class="diview">1</div>
    <div id="diview2" class="diview">2</div>
    <div id="diview3" class="diview">3</div>
    <div id="diview4" class="diview">4</div>
    <div id="diview5" class="diview">5</div>
    <div id="diview6" class="diview">6</div>
    <div id="diview7" class="diview">7</div>
    <div id="diview8" class="diview">8</div>
    <div id="diview9" class="diview">9</div>
</div>

I scroll in that container but what happens is if a scroll up then it scrolls the div too much.

What I want is that it scroll a limited portion only.

For ex: if I scroll down 100px then it's good but on more than that(like 200 or 300) it should only scroll down 110px same goes for scrolling up if I scroll up 100px then it's good but on more than that(like 200 or 300) it should only scroll up 110px.

Requirement is only of JavaScript. No jQuery or any other external library can be used.
How can I do it?

javascript css html
2 Answers

You can do

window.scrollBy(0, 100);
Jojo Momo0

This is a way of doing it:

let maxS = 110;
let t = 2;
function isScrollable(x) {
    let y = (Boolean(x))?"auto":"hidden";
    document.documentElement.style.setProperty("overflow", y);
}
function timeoutScroll() {
    let a = window.pageYOffset;
    const temp = setInterval(function() {
        if (window.pageYOffset >= a + maxS || window.pageYOffset <= a - maxS) {isScrollable(false)}},
                             100)
    setTimeout(function() {isScrollable(true); clearInterval(temp)}, t*1000);
}

And the timeoutScroll function would stop scrolling the page for t seconds for more than maxS pixels

Merlin the Immortal0
Related