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

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