Vue中父组件滚动条出现在子组件上的解决方案

  • Post author:
  • Post category:vue

问题描述

  • 当我们在使用vue 的时候,可能会遇到当你在父组件上调用了其他子组件的时候,这个子组件明明不应该有滚动条,却显示了滚动条,而且上下拖动还会影响父组件的滚动条,这对网页的实际使用产生了不好的影响

楼主的情况

  • 有一个命名为a的父组件
<template>
  <div>
      <detail-banner></detail-banner>
      <detail-header></detail-header>
      <div class="content">
        <detail-list :list="list"></detail-list>
      </div>
  </div>
</template>
  • 里面引用了detail-banner这个子组件,在这个组件中使用了两个页面,通过点击来显示和隐藏图册common-gallary
<template>
  <div>
    <div class="banner" @click="handleClick">
      ......
    </div>
    <common-gallary :imgs="imgs" v-show="showGallary"  @back="handleBack"></common-gallary>
  </div>
</template>
  • 这个图册是铺满屏幕的,本应该没有滚动条,却显示出了父组件的滚动条

在这里插入图片描述

  • 可以看到盒子是屏幕大小,但是却出现了滚动条,而且上下拖动后返回会影响父组件a的滚动情况

解决方案

  • 使用一个名为vue-scroll-lock的插件

具体步骤

  • 安装vue-scroll-lock
    • npm i vue-scroll-lock
  • 在main.js中引入
    • import VueScrollLock from ‘vue-scroll-lock’
    • 配置Vue.use(VueScrollLock)
  • 在想要消除滚动条影响的父组件里(这里是a组件)使用scroll-lock标签包裹内容即可

GitHub链接

vue-scroll-lock

记录学习生活~如果对您有帮助的话,何不点个赞再走呢


版权声明:本文为qq_40571631原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。