我们如何限制一次可以滚动多少用户？

Question

例如，如果可滚动长度为 3000px，但我不希望用户一次滚动超过 600px，我该如何实现？

Answer 1

是的...您可以“强制”滚动位置。然后在一定延迟后停止强制以重新启用正常滚动。见代码中的 cmets。

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>