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

    
标题{{i}}

获取 el-scrollbar 内滚动条向下滚动的距离

this.$refs.scrollMenuRef.wrap.scrollTop

控制 el-scrollbar 内滚动条滚动到指定位置

 比如，向下滚动 100px

this.$refs.scrollMenuRef.wrap.scrollTop = 100

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
},

 完整范例代码