el-scrollbar 滚动条组件用于优化页内滚动条的UI效果，使用时必须指定高度！
/*el-scrollbar 必须指定高度*/ .scrollMenuBox { height: 200px; width: 100px; border: 1px solid red; }
控制el-scrollbar内滚动条的方法与控制页面的滚动条的方法基本一样，只是获取el-scrollbar节点的滚动条时，需使用 this.$refs.scrollMenuRef.wrap
<el-scrollbar ref="scrollMenuRef" class="scrollMenuBox"> <p v-for="i in titleTotal" :key="i">标题{{i}}</p> </el-scrollbar>
获取 el-scrollbar 内滚动条向下滚动的距离
this.$refs.scrollMenuRef.wrap.scrollTop
控制 el-scrollbar 内滚动条滚动到指定位置
比如，向下滚动 100px
this.$refs.scrollMenuRef.wrap.scrollTop
el-scrollbar 内内容的高度
this.$refs.scrollMenuRef.wrap.scrollHeight
监听 el-scrollbar 内滚动条的滚动
this.$refs.scrollMenuRef.wrap.addEventListener("scroll", this.scrollMenu);
隐藏水平滚动条
使用 scoped 时，需用 /deep/ 实现样式穿透
/deep/ .el-scrollbar__wrap { overflow-x: hidden; }
el-scrollbar 内滚动条跟随页面一起滚动
mounted() { // 监听浏览器/页面滚动条的滚动 window.addEventListener("scroll", this.scrollContent); },
// 页面滚动时触发 scrollContent() { // scrollTop为显示屏顶部与整个文档顶部间的距离 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 页面滚动条滚动时，el-scrollbar内滚动条按比例跟随一起滚动 this.$refs.scrollMenuRef.wrap.scrollTop = scrollTop / document.body.scrollHeight * this.$refs.scrollMenuRef.wrap.scrollHeight },
完整范例代码
<template> <div style="padding: 20px"> <div class="menuBox"> <button @click="scrollTo(25)">目录滚动到标题25</button> <br> <button @click="getScrollTop">获取目录内滚动条向下滚动的距离</button> <hr> <p>目录</p> <el-scrollbar ref="scrollMenuRef" class="scrollMenuBox"> <p v-for="i in titleTotal" :key="i">标题{{i}}</p> </el-scrollbar> </div> <div class="contentBox"> <p v-for="i in rowTotal" :key="i">第{{i}}行</p> </div> </div> </template> <script> export default { data() { return { // 总行数 titleTotal: 50, // 总行数 rowTotal: 200 } }, mounted() { // 监听浏览器/页面滚动条的滚动 window.addEventListener("scroll", this.scrollContent); // 监听el-scrollbar内滚动条的滚动 this.$refs.scrollMenuRef.wrap.addEventListener("scroll", this.scrollMenu); }, methods: { // el-scrollbar内滚动条滚动时，打印滚动条向下滚动的距离 scrollMenu() { console.log(this.$refs.scrollMenuRef.wrap.scrollTop) }, // 页面滚动时触发 scrollContent() { // scrollTop为显示屏顶部与整个文档顶部间的距离 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 页面滚动条滚动时，el-scrollbar内滚动条按比例跟随一起滚动 this.$refs.scrollMenuRef.wrap.scrollTop = scrollTop / document.body.scrollHeight * this.$refs.scrollMenuRef.wrap.scrollHeight }, // el-scrollbar内滚动条滚动到指定的标题号 scrollTo(titleNo) { this.$refs.scrollMenuRef.wrap.scrollTop = (titleNo - 1) / this.titleTotal * this.$refs.scrollMenuRef.wrap.scrollHeight }, // 获取el-scrollbar内滚动条向下滚动的距离 getScrollTop() { alert(this.$refs.scrollMenuRef.wrap.scrollTop) } }, } </script> <style scoped> /*目录悬浮*/ .menuBox { position: fixed; } /*内容居中*/ .contentBox { width: 60%; margin: auto; } /*el-scrollbar 必须指定高度*/ .scrollMenuBox { height: 200px; width: 100px; border: 1px solid red; } /*隐藏水平滚动条*/ /deep/ .el-scrollbar__wrap { overflow-x: hidden; } </style>
