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>