Vue h5移动端实现页面不滚动，里面内容滚动

在 Vue.js 中，如果你想禁止整个页面的滚动，但允许某个内部元素进行滚动，你可以通过一些 CSS 和 JavaScript 技巧来实现。最常见的方式是为禁止滚动的部分设置样式，然后为允许滚动的部分设置适当的滚动属性。

这里有一个示例，展示了如何禁止整个页面滚动，但允许页面中的某个特定区域进行滚动。

Step 1: 禁止整个页面滚动

在 Vue.js 组件中，你可以使用 mounted 和 beforeDestroy 钩子来在组件加载和卸载时控制页面滚动。

<template>
  <div class="container">
    <!-- 其他内容 -->
    <div class="scrollable-section">
      <!-- 这是允许滚动的区域 -->
      <div class="content">
        <!-- 你的内容 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    document.body.style.overflow = 'hidden'; // 禁止页面滚动
  },
  beforeDestroy() {
    document.body.style.overflow = ''; // 解除禁止滚动
  },
};
</script>

Step 2: 允许内部元素滚动

对于需要滚动的部分，可以设置一个固定高度，并允许 overflow-y: auto。这样在内容超出其高度时，会显示滚动条。

.container {
  height: 100vh; /* 设定页面高度 */
}

.scrollable-section {
  height: 200px; /* 设定允许滚动区域的高度 */
  overflow-y: auto; /* 允许垂直滚动 */
  background: #f0f0f0; /* 仅用于示例 */
}

.content {
  height: 300px; /* 内容的实际高度超过 scrollable-section */
  background: #e0e0e0; /* 仅用于示例 */
}

在这个示例中，.scrollable-section 允许垂直滚动，而页面其他部分不会滚动。这种方法可用于在需要的情况下控制滚动行为，例如在移动端应用中，为了让用户专注于某些内容或防止页面过多滚动。

具体效果如下：