前端如何解决滚动穿透问题详解

前言

滚动穿透是指在移动端（或具有滚动条的容器中），当一个可滚动的模态框（或类似元素）被打开时，如果用户在该模态框内滚动到尽头，会导致底层页面（或父容器）也跟着滚动。这是一种糟糕的用户体验。

以下是前端解决滚动穿透问题的几种常见方法，以及它们的优缺点和适用场景：

1. overflow: hidden; (最简单，但有局限性)

• 原理: 当模态框打开时，给 body 或根元素添加 overflow: hidden; 样式，阻止其滚动。模态框关闭时，移除该样式。

• 实现 (以 Vue 为例):

  <template>
    <div>
      <button @click="showModal = true">Open Modal</button>
      <div v-if="showModal" class="modal">
        <div class="modal-content">
          <!-- 模态框内容 -->
          <button @click="showModal = false">Close</button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        showModal: false,
      };
    },
    watch: {
      showModal(newValue) {
        if (newValue) {
          document.body.style.overflow = 'hidden';
        } else {
          document.body.style.overflow = ''; // 或 'auto'
        }
      },
    },
    beforeDestroy() { // 重要: 组件销毁时也要移除
      document.body.style.overflow = '';
    }
  };
  </script>
  
  <style>
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow-y: auto; /* 允许模态框自身滚动 */
  }
  .modal-content{
     /* 模态框内容样式 */
  }
  </style>
  

• 优点: 简单易用，代码量少。

• 缺点:

  • 页面跳动: 当 body 的滚动条被隐藏时，页面可能会因为滚动条消失而产生轻微的跳动（尤其是在 Windows 上）。
  • 丢失滚动位置: 关闭模态框后，body 的滚动位置会丢失，回到顶部。
  • 影响其他 fixed 元素: 如果页面上有其他 position: fixed 的元素（例如固定头部、固定侧边栏），它们的位置可能会受到影响，因为 fixed 定位是相对于视口的，而 body 的 overflow: hidden 可能会改变视口的计算方式。
  • 键盘可访问性问题: 如果模态框是使用键盘导航打开的，隐藏body的滚动可能会导致焦点丢失或行为异常.

• 适用场景: 简单的模态框，不需要保留底层页面滚动位置，且页面上没有其他复杂的 fixed 元素。

2. 阻止事件冒泡 (适用于特定场景)

• 原理: 在模态框的滚动容器上阻止 touchmove 事件的冒泡（以及可能的 wheel 事件）。

• 实现:

  <template>
    <div v-if="showModal" class="modal">
      <div class="modal-content" @touchmove.prevent.stop @wheel.prevent.stop>
        </div>
    </div>
  </template>
  

  或使用原生JS

  javascript 代码解读复制代码 modalContent.addEventListener('touchmove', function(event) {
      event.preventDefault();
      event.stopPropagation(); //有时候不需要.stop,只阻止默认行为
   }, { passive: false }); //passive:false 是关键
  

* **注意**: 必须要加上 `{ passive: false }` , 默认 passive 是 true，表示不会调用 preventDefault(). 如果你设置了 passive: true, 又调用了 preventDefault(), 浏览器会忽略 preventDefault(), 并报一个警告。

• 优点: 只阻止模态框内的滚动事件，不影响其他元素。
• 缺点:
  • 只能阻止 touchmove 和 wheel: 无法阻止通过键盘（如 Page Up/Down）或滚动条拖动引起的滚动。
  • 模态框内部滚动问题: 如果模态框内部本身有多个可滚动区域，阻止 touchmove 会导致这些区域也无法滚动。 需要更精细的控制，例如判断当前滚动元素是否已经到达边界。
• 适用场景: 模态框内部只有一个滚动区域，并且不需要键盘或滚动条进行滚动的情况。

3. position: fixed; (较好的解决方案)

• 原理: 当模态框打开时，将 body 设置为 position: fixed;，并记录当前的滚动位置（scrollTop）。关闭模态框时，恢复 body 的定位，并设置回之前记录的滚动位置。

• 实现:

  <template>
    <div v-if="showModal" class="modal" @touchmove.prevent>  </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        showModal: false,
        scrollTop: 0,
      };
    },
    watch: {
      showModal(newValue) {
        if (newValue) {
          this.scrollTop = window.pageYOffset || document.documentElement.scrollTop;
          document.body.style.position = 'fixed';
          document.body.style.top = `-${this.scrollTop}px`;
          document.body.style.width = '100%'; // 确保 body 宽度占满
        } else {
          document.body.style.position = '';
          document.body.style.top = '';
          document.body.style.width = '';
          window.scrollTo(0, this.scrollTop);
        }
      },
    },
     beforeDestroy() { // 重要: 组件销毁时也要移除
       document.body.style.position = '';
          document.body.style.top = '';
          document.body.style.width = '';
          window.scrollTo(0, this.scrollTop);
     }
  };
  </script>
  

• 优点:

  • 保留滚动位置: 关闭模态框后，body 的滚动位置可以恢复。
  • 避免页面跳动: position: fixed; 不会隐藏滚动条，避免了跳动问题。
  • 相对较好地兼容 fixed 元素: 虽然fixed会脱离文档流,但是因为设置了top属性为负的滚动高度，整体页面视觉上不会移动.

• 缺点:

  • 代码略复杂: 需要记录和恢复滚动位置。
  • 兼容性问题: 在一些旧版本的 iOS Safari 中，position: fixed; 可能会导致一些布局问题（虽然现代浏览器基本已修复）。
  • 需要处理滚动条: 需要处理可能存在的滚动条，例如设置body的width:100%, 以防止出现水平滚动条。

• 适用场景: 大多数情况下的模态框，需要保留底层页面滚动位置，且对兼容性要求不高。

4. 使用第三方库

• 原理: 一些第三方库（如 body-scroll-lock）封装了更完善的滚动锁定逻辑，处理了各种边界情况和兼容性问题。

• 实现 (以 body-scroll-lock 为例):

  npm install body-scroll-lock
  

  <template>
    <div v-if="showModal" ref="modal" class="modal">
      <div class="modal-content">
         </div>
    </div>
  </template>
  
  <script>
  import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
  
  export default {
    data() {
      return {
        showModal: false,
      };
    },
    watch: {
      showModal(newValue) {
        if (newValue) {
          disableBodyScroll(this.$refs.modal);
        } else {
          enableBodyScroll(this.$refs.modal);
        }
      },
    },
    beforeDestroy() {
      clearAllBodyScrollLocks(); // 清除所有锁定
    },
  };
  </script>
  

• 优点:

  • 完善的解决方案: 处理了各种细节和兼容性问题。
  • 易于使用: API 简单明了。

• 缺点: 需要引入额外的库，增加项目体积。

• 适用场景: 对滚动锁定有较高要求，需要处理各种复杂情况，且不介意引入第三方库的项目。

5. 使用overscroll-behavior (CSS 属性，较新)

***原理**: `overscroll-behavior` CSS 属性控制当滚动到达元素边界时发生的情况。  它可以防止滚动链（即滚动穿透）。
* **实现**:
    ```css
    .modal-content {
       overscroll-behavior: contain; /* 或 overscroll-behavior-y: contain; */
       /* 其他样式 */
    }
    ```

* **优点**:
    * **原生 CSS 解决方案**: 无需 JavaScript。
    * **性能好**: 浏览器原生支持，性能通常优于 JavaScript 解决方案。
* **缺点**:
    * **兼容性**: 比较新的属性，一些旧浏览器可能不支持（需要检查 Can I Use：[https://caniuse.com/?search=overscroll-behavior](https://caniuse.com/?search=overscroll-behavior)）。 可以考虑回退方案。
* **适用场景**:  如果项目对浏览器兼容性要求不高，`overscroll-behavior` 是一个非常优雅的解决方案。

总结和选择建议：

• 简单场景，不需保留滚动位置： overflow: hidden;
• 模态框内只有一个滚动区域，且不需要键盘/滚动条滚动： 阻止事件冒泡
• 大多数情况，需要保留滚动位置： position: fixed;
• 需要处理复杂情况，不介意引入库： body-scroll-lock
• 浏览器兼容性允许： overscroll-behavior (首选，最优雅)

最佳实践是根据项目的具体需求和目标浏览器来选择最合适的方法。通常，position: fixed; 或 body-scroll-lock 是比较稳妥的选择。如果对兼容性要求不高，强烈推荐 overscroll-behavior。 记得在开发过程中进行充分的测试，确保在各种设备和浏览器上都能正常工作。

总结

到此这篇关于前端如何解决滚动穿透问题的文章就介绍到这了,更多相关前端滚动穿透问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论