如何禁用滚动时达到n%底部?

Question

如何在底部达到80%时禁用滚动?我从下面的代码开始禁用滚动功能，但它在iPhone上不起作用。源

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

是否有一个js/CSS的方式或任何包，可以检测滚动百分比?并禁用它时，达到约80%的底部(但可以再次向上滚动)?

Answer 1

window.scrollY将为您提供页面滚动的数量，您可以获得这些值，然后对它们进行一些计算以达到您的期望。

你可以实现它们在另一个useEffect钩子来控制你的滚动数量，然后触发侦听器或在到达时删除它们:

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

注1:document.body.offsetHeight是你的整个页面的大小，用户看到没有任何滚动

注2:你可以用这些参数做简单的计算来达到你想要的行为。

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