首页 前端知识 Vue h5移动端实现页面不滚动,里面内容滚动

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

2024-09-01 23:09:50 前端知识 前端哥 284 867 我要收藏

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

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

Step 1: 禁止整个页面滚动

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

<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 允许垂直滚动,而页面其他部分不会滚动。这种方法可用于在需要的情况下控制滚动行为,例如在移动端应用中,为了让用户专注于某些内容或防止页面过多滚动。

具体效果如下:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17425.html
标签
评论
发布的文章

Spring MVC-JSON

2024-06-02 09:06:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!