vue 父子组件设置 scoped，如何导致滚动条失效的

帝博格T－bag

已于 2023-01-06 12:05:25 修改

阅读量1.3k

点赞数 1

分类专栏： CSS Vue 文章标签： vue.js 前端 javascript

于 2023-01-06 12:04:53 首次发布

本文链接：https://blog.csdn.net/m0_37616866/article/details/128576134

版权

Vue 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

CSS

11 篇文章 0 订阅

订阅专栏

vue父组件的页面结构

// 调用子组件
<process-time-line :nodeArr="nodeArr"></process-time-line>
父组件的样式
<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0px;
   height: 0px;
 }
</style>

子组件的页面结构

<div class="time-line">
      <ul class="time-line-list" :style="{'width': 180 * nodeArr.length + 10 + 'px'}">
        <li class="time-line-item"
         v-for="(item, index) in nodeArr"
         :key="index">
        </li>
      </ul>
</div>
<style scoped>
.time-line{
  padding: 0px 20px;
  background: #fff;
  height: 210px;
  overflow:scroll;
}
.time-line .time-line-list .time-line-item{
  width: 180px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
</style>

vue 运行后，time-line元素的实际调用的样式

根据dom结构的 data-v 可以看出， .time-line 使用两个样式,分别是data-v-2c6a2d00 、data-v-49a8f5b2
选中.time-line 元素, 通过data-v-49a8f5b2 筛选，查询出 .time-line 使用到父组件的 ::-webkit-scrollbar 属性
::-webkit-scrollbar 设置滚动条的样式

[data-v-49a8f5b2]::-webkit-scrollbar {
    width: 0px;  // 导致该元素横线滚动消失了
    height: 0px; // 导致该元素竖向滚动消失了
}

知识点总结：

当父组件中调用子组件时，父组件的样式会影响子组件的布局
当父组件样式设置 scoped 时，会生成一个 data-v 标识，例如 data-v-49a8f5b2，如果该元素使用到了父元素的样式，那么dom元素上就会加上这个标识 data-v-49a8f5b2
当子组件样式，设置 scoped 时，会生成一个 data-v 标识，例如 data-v-2c6a2d00，如果该元素使用到子组件的样式，那么dom元素上就会加上这个标识 data-v-2c6a2d00
通过选中元素，筛选标识，就可以快速定位到，该元素使用的样式
通过对滚动条样式设置 ::-webkit-scrollbar ，可以隐藏滚动条