網(wǎng)上的大多都是以document為外層滾動，本次封裝的是對元素滾動
主要來源http://www.itdecent.cn/p/2ad8c8b5bf75

<template>
    <div class="pipe-analysis">
        <el-row type="flex" class="row-content">
            <el-col :span="4">
                <ul class="scrollMenu">
                    <li v-for="(item,index) in selectList"
                        :key="item.first"
                        :class="{active: active===index}" 
                        @click="scrollTo(index)">
                        {{ item.first }}</li>
                </ul>
            </el-col>
            <el-col :span="20">
                <el-scrollbar class="detail-scrollBar">
                    <div class="scrollContent">
                        <custom-collapse 
                            v-for="(item,index) in selectList"
                            :key="index"
                            :fold="false"
                            :title="item.first" 
                            class="safety-city-panel select-item">
                            <custom-test></custom-test>
                        </custom-collapse>
                    </div>
                </el-scrollbar>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { Scrollbar,Row,Col, } from 'element-ui';
import Collapse from '../../../components/collapse/collapse.vue';
import test from './test';
export default {
    components:{
        'el-row':Row,
        'el-col':Col,
        'el-scrollbar': Scrollbar,
        'custom-collapse': Collapse,
        'custom-test': test,
    },
    data() {
        return {
            dialogShow:false,
            selectList:[
                {
                    first:'介質(zhì)短期危害性1介質(zhì)短期危害性1介質(zhì)短期危害性1介質(zhì)短期危害性1',
                    second:'介質(zhì)短期危害性1',
                },
                {
                    first:'介質(zhì)短期危害性2',
                    second:'介質(zhì)短期危害性2',
                },
                {
                    first:'介質(zhì)短期危害性3',
                    second:'介質(zhì)短期危害性3',
                },
                {
                    first:'介質(zhì)短期危害性4',
                    second:'介質(zhì)短期危害性4',
                },
                {
                    first:'介質(zhì)短期危害性5',
                    second:'介質(zhì)短期危害性5',
                }
            ],
            active:0,
            contentDiv:null
        };
    },
    mounted() {
        // 監(jiān)聽滾動事件
        this.contentDiv = document.querySelector('.el-scrollbar__wrap');
        this.contentDiv.addEventListener('scroll', this.onScroll, true);
    },
    destroy() {
        // 必須移除監(jiān)聽器，不然當(dāng)該vue組件被銷毀了，監(jiān)聽器還在就會出錯
        this.contentDiv.removeEventListener('scroll', this.onScroll);
    },
    methods: {
        // 滾動監(jiān)聽器
        onScroll() {
            // 獲取所有錨點元素
            const navContents = document.querySelectorAll('.select-item');
            // 所有錨點元素的 offsetTop
            const offsetTopArr = [];
            navContents.forEach(item => {
                offsetTopArr.push(item.offsetTop);
            });
            console.log(offsetTopArr)
            // 獲取當(dāng)前文檔流的 scrollTop
            const scrollTop = this.contentDiv.scrollTop;
            console.log(scrollTop)
            // 定義當(dāng)前點亮的導(dǎo)航下標(biāo)
            let navIndex = 0;
            for (let n = 0; n < offsetTopArr.length; n++) {
                // 如果 scrollTop 大于等于第n個元素的 offsetTop 則說明 n-1 的內(nèi)容已經(jīng)完全不可見
                // 那么此時導(dǎo)航索引就應(yīng)該是n了
                if (scrollTop >= offsetTopArr[n]) {
                    navIndex = n;
                    console.log(navIndex ,n )
                }
            }
            this.active = navIndex;
        },
        // 跳轉(zhuǎn)到指定索引的元素
        scrollTo(index) {
            // 獲取目標(biāo)的 offsetTop
            // css選擇器是從 1 開始計數(shù)，我們是從 0 開始，所以要 +1
            const targetOffsetTop = document.querySelector(
                `.select-item:nth-child(${index + 1})`
            ).offsetTop;
            console.log(targetOffsetTop)
            // 獲取當(dāng)前 offsetTop
            let scrollTop = this.contentDiv.scrollTop;
            // 定義一次跳 50 個像素，數(shù)字越大跳得越快，但是會有掉幀得感覺，步子邁大了會扯到蛋
            const STEP = 50;
            // 判斷是往下滑還是往上滑
            if (scrollTop > targetOffsetTop) {
                // 往上滑
                smoothUp();
            } else {
                // 往下滑
                smoothDown();
            }
            // 定義往下滑函數(shù)
            function smoothDown() {
                // 如果當(dāng)前 scrollTop 小于 targetOffsetTop 說明視口還沒滑到指定位置
                if (scrollTop < targetOffsetTop) {
                    // 如果和目標(biāo)相差距離大于等于 STEP 就跳 STEP
                    // 否則直接跳到目標(biāo)點，目標(biāo)是為了防止跳過了。
                    if (targetOffsetTop - scrollTop >= STEP) {
                        scrollTop += STEP;
                    } else {
                        scrollTop = targetOffsetTop;
                    }
                    const oDiv = document.querySelector('.el-scrollbar__wrap');
                    oDiv.scrollTop = scrollTop;
                    // 關(guān)于 requestAnimationFrame 可以自己查一下，在這種場景下，相比 setInterval 性價比更高
                    requestAnimationFrame(smoothDown);
                }
            }
            // 定義往上滑函數(shù)
            function smoothUp() {
                if (scrollTop > targetOffsetTop) {
                    if (scrollTop - targetOffsetTop >= STEP) {
                        scrollTop -= STEP;
                    } else {
                        scrollTop = targetOffsetTop;
                    }
                    const oDiv = document.querySelector('.el-scrollbar__wrap');
                    oDiv.scrollTop = scrollTop;
                    requestAnimationFrame(smoothUp);
                }
            }
        },
        onClose(){
            this.dialogShow=false;
        }, 
        changeActive(index){
            this.active = index;
        }
    },
};
</script>

<style lang="scss">
.detail-scrollBar{
    height: 100%;
    margin: 0 20px;
    .el-scrollbar__wrap {
        overflow-x: hidden;
        margin-bottom: 0 !important;
    }
}
</style>
<style lang="scss" scoped>
.pipe-analysis{
    display: flex;
    width: 100%;
    height: 100%;
    .row-content{
        width: 100%;
        .scrollMenu{
            margin-top: 10px;
            li{
                margin-bottom: 24px;
                padding-left: 10px;
                color:rgba(0,0,0,0.85);
                font-weight: bold;
                &.active{
                    border-left: 2px solid #1890FF;
                    color: #1890FF;
                }
            }
        }
        .select-item{
            width: 100%;
        }
    }
}
</style>

主要是對超長元素最外層固定寬高元素的滾動監(jiān)聽 ，scrollTop也是針對這個元素
切記!!無腦復(fù)制粘貼不加改動 肯定不行!!