el-scrollbar组件的使用

<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,但两者的内容高度均不一致,最终呈现效果如下

elementPlus已有文档 https://element-plus.org/zh-CN/component/scrollbar.html