<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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.



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; // 右侧实际内容高度
      }
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.


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


el-scrollbar组件的使用_ide