element——滚动条组件el-scrollbar

优化滚动条样式

<el-scrollbar ref="scrollMenuRef" class="scrollMenuBox">
    <p v-for="i in 100" :key="i">标题{
    
    {
    
    i}}</p>
</el-scrollbar>
/*el-scrollbar 必须指定高度*/
.scrollMenuBox {
    
    
    height: 200px;
    width: 100px;
    border: 1px solid red;
}

• 获取 el-scrollbar 内滚动条向下滚动的距离this.$refs.scrollMenuRef.wrap.scrollTop
• 控制 el-scrollbar 内滚动条滚动到指定位置this.$refs.scrollMenuRef.wrap.scrollTop = 100
• el-scrollbar 内内容的高度this.$refs.scrollMenuRef.wrap.scrollHeight
• 监听 el-scrollbar 内滚动条的滚动this.$refs.scrollMenuRef.wrap.addEventListener("scroll", this.scrollMenu);
• 隐藏水平滚动条

/deep/ .el-scrollbar__wrap {
    
    
    overflow-x: hidden;
}