el-scrollbar 滾動(dòng)條組件用于優(yōu)化頁(yè)內(nèi)滾動(dòng)條的UI效果，使用時(shí)必須指定高度！

/*el-scrollbar 必須指定高度*/
.scrollMenuBox {
    height: 200px;
    width: 100px;
    border: 1px solid red;
}

控制el-scrollbar內(nèi)滾動(dòng)條的方法與控制頁(yè)面的滾動(dòng)條的方法基本一樣，只是獲取el-scrollbar節(jié)點(diǎn)的滾動(dòng)條時(shí)，需使用? this.$refs.scrollMenuRef.wrap

<el-scrollbar ref="scrollMenuRef" class="scrollMenuBox">
    <p v-for="i in titleTotal" :key="i">標(biāo)題{{i}}</p>
</el-scrollbar>

獲取 el-scrollbar 內(nèi)滾動(dòng)條向下滾動(dòng)的距離

this.$refs.scrollMenuRef.wrap.scrollTop

控制 el-scrollbar 內(nèi)滾動(dòng)條滾動(dòng)到指定位置

?比如，向下滾動(dòng) 100px

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

el-scrollbar 內(nèi)內(nèi)容的高度

this.$refs.scrollMenuRef.wrap.scrollHeight

監(jiān)聽(tīng) el-scrollbar 內(nèi)滾動(dòng)條的滾動(dòng)

this.$refs.scrollMenuRef.wrap.addEventListener("scroll", this.scrollMenu);

隱藏水平滾動(dòng)條

?使用 scoped 時(shí)，需用 /deep/ 實(shí)現(xiàn)樣式穿透

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

el-scrollbar 內(nèi)滾動(dòng)條跟隨頁(yè)面一起滾動(dòng)

mounted() {
    // 監(jiān)聽(tīng)瀏覽器/頁(yè)面滾動(dòng)條的滾動(dòng)
    window.addEventListener("scroll", this.scrollContent);
},

// 頁(yè)面滾動(dòng)時(shí)觸發(fā)
scrollContent() {
    // scrollTop為顯示屏頂部與整個(gè)文檔頂部間的距離
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 頁(yè)面滾動(dòng)條滾動(dòng)時(shí)，el-scrollbar內(nèi)滾動(dòng)條按比例跟隨一起滾動(dòng)
    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)">目錄滾動(dòng)到標(biāo)題25</button>
            <br>
            <button @click="getScrollTop">獲取目錄內(nèi)滾動(dòng)條向下滾動(dòng)的距離</button>
            <hr>
            <p>目錄</p>
            <el-scrollbar ref="scrollMenuRef" class="scrollMenuBox">
                <p v-for="i in titleTotal" :key="i">標(biāo)題{{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 {
                // 總行數(shù)
                titleTotal: 50,
                // 總行數(shù)
                rowTotal: 200
            }
        },
        mounted() {
            // 監(jiān)聽(tīng)瀏覽器/頁(yè)面滾動(dòng)條的滾動(dòng)
            window.addEventListener("scroll", this.scrollContent);
            // 監(jiān)聽(tīng)el-scrollbar內(nèi)滾動(dòng)條的滾動(dòng)
            this.$refs.scrollMenuRef.wrap.addEventListener("scroll", this.scrollMenu);
        },
        methods: {
            // el-scrollbar內(nèi)滾動(dòng)條滾動(dòng)時(shí)，打印滾動(dòng)條向下滾動(dòng)的距離
            scrollMenu() {
                console.log(this.$refs.scrollMenuRef.wrap.scrollTop)
            },
// 頁(yè)面滾動(dòng)時(shí)觸發(fā)
            scrollContent() {
                // scrollTop為顯示屏頂部與整個(gè)文檔頂部間的距離
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                // 頁(yè)面滾動(dòng)條滾動(dòng)時(shí)，el-scrollbar內(nèi)滾動(dòng)條按比例跟隨一起滾動(dòng)
                this.$refs.scrollMenuRef.wrap.scrollTop = scrollTop / document.body.scrollHeight * this.$refs.scrollMenuRef.wrap.scrollHeight
            },
            // el-scrollbar內(nèi)滾動(dòng)條滾動(dòng)到指定的標(biāo)題號(hào)
            scrollTo(titleNo) {
                this.$refs.scrollMenuRef.wrap.scrollTop = (titleNo - 1) / this.titleTotal * this.$refs.scrollMenuRef.wrap.scrollHeight
            },
            // 獲取el-scrollbar內(nèi)滾動(dòng)條向下滾動(dòng)的距離
            getScrollTop() {
                alert(this.$refs.scrollMenuRef.wrap.scrollTop)
            }
        },
    }
</script>
<style scoped>
    /*目錄懸浮*/
    .menuBox {
        position: fixed;
    }

    /*內(nèi)容居中*/
    .contentBox {
        width: 60%;
        margin: auto;
    }

    /*el-scrollbar 必須指定高度*/
    .scrollMenuBox {
        height: 200px;
        width: 100px;
        border: 1px solid red;
    }

    /*隱藏水平滾動(dòng)條*/
    /deep/ .el-scrollbar__wrap {
        overflow-x: hidden;
    }
</style>

?