1、npm下载

npm install vuescroll -S

官网：https://vuescrolljs.yvescoding.org/zh/

<template>
  <div>
    <vuescroll :ops="ops">
      <div class="container">
        <ul v-for="(item, index) in 100" :key="index">
          <li>{{ item }}</li>
        </ul>
      </div>
    </vuescroll>
  </div>
</template>

<script>
import vuescroll from "vuescroll";

export default {
  components: {
    vuescroll,
  },
  data() {
    return {
      ops: {
        mode: "native",
        sizeStrategy: "percent",
        detectResize: true, //检测内容尺寸是否发生变化
        bar: {
          background: "#003366", //滚动条的背景颜色
          // opacity: 0.5, //透明度
          keepShow: true, // 一直显示滚动条
        },
        scrollPanel: {
          maxHeight: 200, //这是滚动条最大高度,内容高度小于 maxHeight 时高度自适应，超出的话出现滚动条
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: skyblue;
  // height: 200px;
  // overflow: hidden;
}
</style>