How can we limit how much user can scroll at once?

Question

For example if the scrollable length is 3000px, but I dont't want the user scroll more than 600px at once, how can I achieve that ?

Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output using the `[<>]` snippet editor. — mplungjan, Dec 14 '20 at 14:29
Here is someone who had the [same question](https://stackoverflow.com/questions/4061393/splitting-a-long-page-into-a-number-of-pages) — mplungjan, Dec 14 '20 at 14:30
And [here:](https://stackoverflow.com/questions/41719192/how-do-i-paginate-long-articles-from-the-client-side-using-javascript-or-jquery) — mplungjan, Dec 14 '20 at 14:30
@mplungjan Thanks, but what I'm asking is completely different. The question you referenced talks about pagination. What I want is, on the other hand, prevent user scroll more than certain number of pixels per action of clicking on the scroll thumb and dragging it — noiseymur, Dec 14 '20 at 14:35
That is pagination. Just using scroll. https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1 — mplungjan, Dec 14 '20 at 14:42
@mplungjan No, I want the scroll area to be infinite, but not let user scroll all the way to the bottom at once. I want them to do it in several steps. — noiseymur, Dec 14 '20 at 14:50

score 2 · Answer 1 · answered Dec 14 '20 at 15:08

Yes... You can "force" the scroll position. Then stop that forcing after a certain delay to re-enable the normal scrolling. See comments in code.

console.clear()
let page = document.querySelector("#page")

let scrolled = page.scrollTop
let timeout

page.addEventListener("scroll", function(e){
  let scrolling = this.scrollTop
  let scrollBlock = 600
  
  // Scrolling down
  if(scrolling>scrolled+scrollBlock){
    console.log("No scroll allowed!")
    
    // "force" scroll positioin
    this.scrollTop = scrolled+scrollBlock
    
    // a timeout to prevent scrolling for at least 2 seconds
    clearTimeout(timeout)
    timeout = setTimeout(function(){
      console.clear()
      console.log("ok, you can scroll again.")
      
      // Update the scroll limit
      scrolled = scrolled+scrollBlock
    },2000)
  }
  
  // Scrolling up re-adjusts the scrolled value for futur scroll down
  if(scrolling<scrolled){
    scrolled -= scrollBlock
  }
})

*{
  padding: 0;
  margin: 0;
}
#page{
  overflow: scroll;
  height: 100vh;
}
#inner{
  height: 3000px;
}

<div id="page">
  <div id="inner"></div>
</div>

How can we limit how much user can scroll at once?

1 Answers1