vue解决ios滚动穿透

原创

mob64ca12edad02 2024-10-31 06:44:27 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12edad02的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue解决iOS滚动穿透的实现

在移动端开发的过程中，尤其是在使用 Vue.js 框架时，处理iOS设备上的滚动穿透问题是个常见挑战。当我们在弹出层（如模态框、导航菜单）打开时，页面背景不应随意滚动，这会导致用户界面混乱。接下来，我们将通过几个简单的步骤来解决这个问题。

整个流程

我们可以将这个解决方案分为以下几个步骤：

步骤编号	步骤描述
1	创建Vue项目并安装相关依赖
2	监听滚动事件
3	添加样式来控制滚动
4	实现打开和关闭模态框的功能

步骤详细说明

步骤1：创建Vue项目并安装相关依赖

首先，你需要创建一个新的 Vue 项目，如果你还没有创建，请使用 Vue CLI 来进行创建。

vue create project-name

完成创建后，进入项目目录：

cd project-name

步骤2：监听滚动事件

在你的 Vue 组件中，添加一个数据属性来控制模态框的显示状态，并在mounted生命周期钩子中监听scroll事件。

export default {
  data() {
    return {
      showModal: false // 控制模态框显示的状态
    };
  },
  methods: {
    openModal() {
      this.showModal = true; // 打开模态框时将状态设为true
      document.body.style.overflow = 'hidden'; // 禁止滚动
    },
    closeModal() {
      this.showModal = false; // 关闭模态框
      document.body.style.overflow = 'auto'; // 允许滚动
    }
  }
};

提示：这里我们改变了body的overflow属性，借此来避免页面的滚动。

步骤3：添加样式来控制滚动

有时，仅仅通过 JavaScript 控制滚动可能还不够，还需要通过 CSS 来确保模态框的样式不会影响到页面的整体布局。你可以在样式文件中添加如下样式：

.modal {
  position: fixed; /* 确保模态框是固定定位 */
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%; /* 填满整个屏幕 */
  background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中内容 */
}

步骤4：实现打开和关闭模态框的功能

最后在模板中根据showModal状态决定是否渲染模态框，并添加对应的打开和关闭功能。

<template>
  <div>
    <button @click="openModal">打开模态框</button>
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <span @click="closeModal" class="close">&times;</span>
        <p>这是一个模态框！</p>
      </div>
    </div>
  </div>
</template>