vue：使用vuescroll

使用Vue.js实现滚动条组件

最新推荐文章于 2025-10-17 14:08:34 发布

原创最新推荐文章于 2025-10-17 14:08:34 发布 · 4.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #开发语言

vue 专栏收录该内容

36 篇文章

订阅专栏

该博客介绍了如何使用VueScroll库在Vue.js项目中创建一个自定义滚动条。通过安装npm包vuescroll并引入组件，配置滚动条样式和行为，实现了内容区域的滚动效果。示例代码展示了如何在模板、脚本和样式部分设置滚动条的属性，如模式、大小策略、内容尺寸检测等。

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>