Element UI【详解】el-scrollbar 滚动条组件

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>