使用 JavaScript 中断 iOS 滚动

Posted 2023-03-14

技术标签:

【中文标题】使用 JavaScript 中断 iOS 滚动【英文标题】：Interrupt iOS scrolling using JavaScript 【发布时间】：2014-11-27 16:41:30 【问题描述】：

有没有办法使用 javascript 中断 ios 滚动？

示例 1：用户通过在设备屏幕上移动手指来滚动内容。当某些事件发生时，用户继续移动手指而不抬起，但不再滚动。

示例 2：用户开始滚动但没有抬起手指就停止了。发生了一些事件，滚动条消失了。

示例 3：当某些事件发生时，动量滚动完全停止。

【问题讨论】：

【参考方案1】：

使用another question 中的以下代码可能会涵盖第一种情况

<script type="text/javascript">
   function blockMove() 
      event.preventDefault() ;

</script>

<body ontouchmove="blockMove()">

但是，它将only work on iOS 8+。至于其他两种情况，我不知道有什么方法可以做到这一点。

【讨论】：

无法通过 event.preventDefault() 中断正在进行的滚动【参考方案2】：

如果您正在谈论中断 iOS 惯性/动量滚动，那么我可能会为您提供一些东西。

首先，您需要添加fastclick.js。该库消除了移动设备上 300 毫秒的点击延迟，并在惯性/动量滚动期间启用了事件捕获。

在包含 fastclick 并将其附加到 body 元素后，我的中断滚动代码如下所示：

scrollElement.style.overflow = 'hidden';
setTimeout(function() 
  scrollElement.style.overflow = '';
, 10);

诀窍是设置overflow: hidden，它会停止惯性/动量滚动。请参阅我的小提琴以获取 stop scrolling during inertia/momentum 的完整实现。

【讨论】：

以上是关于使用 JavaScript 中断 iOS 滚动的主要内容，如果未能解决你的问题，请参考以下文章