到达n％底部时如何禁用滚动？答案

【问题标题】：How to disable scroll when reaches n% bottom?到达n％底部时如何禁用滚动？
【发布时间】：2021-09-27 09:18:20
【问题描述】：

当滚动到底部的 80% 时，我们如何禁用滚动？我从下面的代码中启动了禁用滚动功能，但它在 iPhone 中不起作用。 source

useEffect(() => {
    document.addEventListener('touchstart', function(e) {e.preventDefault()}, false);
    document.addEventListener('touchmove', function(e) {e.preventDefault()}, false);
}, []);

是否有 js/CSS 方式或任何可以检测滚动百分比的包？并在达到大约 80% 的底部时禁用它（但可以再次向上滚动）？

【问题讨论】：

您可以进行 DOM 读取，获取文档的整个高度，计算该值的 80%，然后在命中时禁用它

标签： javascript reactjs events

【解决方案1】：

window.scrollY 会给你你的页面滚动量，你可以得到这些值，然后对它们进行一些计算以达到你的期望。

您可以在另一个 useEffect 挂钩中实现它们以控制您的 scroll 数量，然后触发侦听器或在到达时将其删除：

useEffect(() => {
  if(window.scrollY > document.body.offsetHeight) {
    // now you can remove your listener
  }
}, [])

注意 1：document.body.offsetHeight 是用户在没有任何滚动的情况下看到的整个页面大小。

注意 2：您可以使用这些参数进行简单的计算以达到您想要的行为。

注意 3： 在此伪代码中，useEffect 将在每次页面大小更改和每次滚动后触发，因为它的依赖数组。为了防止或增强这种情况，您可以为窗口的实际大小创建一个变量，然后将其传递给使用 useEffect 依赖项数组以根据您的需要触发它。

【讨论】：