el-scrollbar组件的使用

最新推荐文章于 2025-06-27 11:45:50 发布

原创最新推荐文章于 2025-06-27 11:45:50 发布 · 296 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

<article>
  <!-- 左侧区域-->
  <el-scrollbar class="left-aside">
    <!-- 780px -->
    <div class="left-content"></div>
  </el-scrollbar>
  <!-- 右侧区域 -->
  <el-scrollbar class="right-aside">
    <!-- 1800px -->
    <div class="right-content"></div>
  </el-scrollbar>
</article>

article {
  display: flex;
  justify-content: space-between;
  .el-scrollbar {
    height: 680px; // 两区域展示的高度均为680px
    border-radius: 10px;
    background-color: #fff;
    &.left-aside {
      width: 490px;
    }
    &.right-aside {
      width: 1060px;
    }
    .el-scrollbar__wrap {
      margin: 0 !important;
      // 隐藏浏览器原生滚动条
      &::-webkit-scrollbar {
        display: none;
      }
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
      .left-content {
        height: 780px; // 左侧实际内容高度
      }
      .right-content {
        height: 1800px; // 右侧实际内容高度
      }
    }
  }
}

本例中的样式没有使用scoped,因此可以直接更改Element的内部样式.如果你使用了scoped,请使用样式穿透/deep/ 选择器{}.vue3则是:deep(选择器){}
两侧区域的高度均为680px,但两者的内容高度均不一致,最终呈现效果如下