提问者:小点点

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


例如,如果滚动长度是3000px,但我不想让用户一次滚动超过600px,我如何才能实现?


共2个答案

匿名用户

是的。。。你可以“强制”滚动位置。然后在一定的延迟后停止强制,重新启用正常滚动。请参见代码中的注释。

null

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>

匿名用户

我发现了一个类似的帖子,其中一个用户似乎找到了一个答案,让我知道它是否对你有用,是否有可能限制/调整浏览器页面的滚动高度?