「前端发动机」Touchmove 禁止默认滚动的几种方案

2023-12-08 11:13:11

问题背景

在移动端开发中，经常会使用「touchmove」事件来触发各种动画效果。然而，在使用「touchmove」事件时，很容易触发页面自身的垂直方向的滚动。这是因为，当手指在屏幕上移动时，浏览器会默认将此操作解读为滚动手势。因此，我们需要禁用默认滚动，以便「touchmove」事件能够正常触发动画效果。

方案介绍

禁用默认滚动有以下几种方案：

使用「preventDefault()」方法
使用「stopPropagation()」方法
使用「touch-action」属性
使用「overflow: hidden」属性

下面将详细介绍每种方案的实现原理和使用场景。

使用「preventDefault()」方法

「preventDefault()」方法可以阻止默认行为的发生。在「touchmove」事件中使用「preventDefault()」方法，可以禁止页面自身的垂直方向的滚动。代码示例如下：

``` element.addEventListener('touchmove', function(e) { e.preventDefault(); }); ```

使用「stopPropagation()」方法

「stopPropagation()」方法可以阻止事件的传播。在「touchmove」事件中使用「stopPropagation()」方法，可以禁止页面自身的垂直方向的滚动。代码示例如下：

``` element.addEventListener('touchmove', function(e) { e.stopPropagation(); }); ```

使用「touch-action」属性

「touch-action」属性可以指定元素的触摸行为。在元素上设置「touch-action: none」可以禁止元素的任何触摸行为，包括滚动。代码示例如下：

``` element.style.touchAction = 'none'; ```

使用「overflow: hidden」属性

「overflow: hidden」属性可以隐藏元素的溢出内容。在元素上设置「overflow: hidden」可以禁止元素的垂直方向的滚动。代码示例如下：

``` element.style.overflow = 'hidden'; ```

方案对比

以下表格对比了四种方案的优缺点：

| 方案 | 优点 | 缺点 | |---|---|---| | 「preventDefault()」方法 | 简单易用 | 可能会影响其他事件的触发 | | 「stopPropagation()」方法 | 简单易用 | 可能会影响其他事件的触发 | | 「touch-action」属性 | 跨浏览器兼容性好 | 只能禁用元素的触摸行为，不能禁用页面的滚动 | | 「overflow: hidden」属性 | 简单易用 | 会隐藏元素的溢出内容 |

代码示例

以下代码示例演示了如何使用「preventDefault()」方法禁用默认滚动：

```

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus euismod. Maecenas eget lacus eget nunc luctus euismod. Maecenas eget lacus eget nunc luctus euismod. Maecenas eget lacus eget nunc luctus euismod. Maecenas eget lacus eget nunc luctus euismod. Maecenas eget lacus eget nunc luctus euismod. Maecenas eget lacus eget nunc luctus euismod.

```

运行以上代码，可以在移动端上体验「touchmove」事件禁用默认滚动的效果。