limited scroll at a time-CodePudding

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

<div  >
    <div id="diview0" >0</div>
    <div id="diview1" >1</div>
    <div id="diview2" >2</div>
    <div id="diview3" >3</div>
    <div id="diview4" >4</div>
    <div id="diview5" >5</div>
    <div id="diview6" >6</div>
    <div id="diview7" >7</div>
    <div id="diview8" >8</div>
    <div id="diview9" >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?

CodePudding user response：

You can do

window.scrollBy(0, 100);

CodePudding user response：

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