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

Posted 2023-03-05

【中文标题】我们如何限制一次可以滚动多少用户？

【英文标题】：How can we limit how much user can scroll at once?

【发布时间】：2021-03-25 04:37:50

【问题描述】：

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

【问题讨论】：

请访问help center，使用tour查看内容和How to Ask。做一些研究，搜索关于 SO 的相关主题；如果您遇到困难，请发布您的尝试minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。

这里有人拥有same question

还有here:

@mplungjan 谢谢，但我要问的是完全不同的。你提到的问题是关于分页的。另一方面，我想要的是防止用户每次单击滚动拇指并拖动它时滚动超过一定数量的像素

那是分页。只是使用滚动。 uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1

【参考方案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>