移动端滚动穿透，一文搞定

2023-09-12 19:19:25

移动端开发中，相信大家或多或少都遇到过滚动穿透的问题。在移动端，由于页面元素复杂，嵌套结构多，不同元素的滚动事件容易冲突，从而导致滚动穿透问题。本文将详细分析滚动穿透的原理，并提供多种解决办法，帮助您轻松解决滚动穿透问题。

滚动穿透原理

滚动穿透的原理很简单，就是当父元素和子元素都有滚动事件时，父元素的滚动事件会穿透子元素的滚动事件，从而导致子元素无法滚动。如下图所示：

滚动穿透原理图

在上图中，父元素 <div id="parent"> 和子元素 <div id="child"> 都具有滚动事件。当用户在 <div id="child"> 中滚动时，<div id="child"> 的滚动事件会被触发，但是由于父元素 <div id="parent"> 也有滚动事件，因此 <div id="parent"> 的滚动事件也会被触发，从而导致 <div id="child"> 的滚动失效。

滚动穿透的解决办法

解决滚动穿透问题的方法有很多，以下列举几种常用的方法：

1. 使用 `overflow: hidden`

最简单的方法是使用 overflow: hidden 样式。通过将父元素的 overflow 属性设置为 hidden，可以禁止父元素的滚动条出现，从而防止父元素的滚动事件穿透子元素的滚动事件。

#parent {
  overflow: hidden;
}

2. 使用 `touch-action: none`

touch-action 属性可以控制元素的触摸行为。通过将子元素的 touch-action 属性设置为 none，可以禁止子元素的滚动事件。

#child {
  touch-action: none;
}

3. 使用 `pointer-events: none`

pointer-events 属性可以控制元素的指针事件。通过将子元素的 pointer-events 属性设置为 none，可以禁止子元素的滚动事件。

#child {
  pointer-events: none;
}

4. 使用 `event.stopPropagation()` 方法

event.stopPropagation() 方法可以阻止事件的传播。在子元素的滚动事件处理函数中，可以通过调用 event.stopPropagation() 方法来阻止滚动事件的传播，从而防止滚动事件穿透到父元素。

#child.addEventListener('scroll', function(event) {
  event.stopPropagation();
});

5. 使用 `vue-scroll-lock` 插件

对于 Vue.js 开发者，可以使用 vue-scroll-lock 插件来解决滚动穿透问题。该插件可以自动禁用父元素的滚动事件，从而防止滚动穿透问题发生。

import VueScrollLock from 'vue-scroll-lock';

Vue.use(VueScrollLock);

export default {
  components: {
    VueScrollLock
  },
  data() {
    return {
      locked: false
    };
  },
  methods: {
    lockScroll() {
      this.locked = true;
    },
    unlockScroll() {
      this.locked = false;
    }
  }
};