vue锚点跳转双向绑定

网上的大多都是以document为外层滚动，本次封装的是对元素滚动
主要来源https://www.jianshu.com/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:'介质短期危害性1介质短期危害性1介质短期危害性1介质短期危害性1',
                    second:'介质短期危害性1',
                },
                {
                    first:'介质短期危害性2',
                    second:'介质短期危害性2',
                },
                {
                    first:'介质短期危害性3',
                    second:'介质短期危害性3',
                },
                {
                    first:'介质短期危害性4',
                    second:'介质短期危害性4',
                },
                {
                    first:'介质短期危害性5',
                    second:'介质短期危害性5',
                }
            ],
            active:0,
            contentDiv:null
        };
    },
    mounted() {
        // 监听滚动事件
        this.contentDiv = document.querySelector('.el-scrollbar__wrap');
        this.contentDiv.addEventListener('scroll', this.onScroll, true);
    },
    destroy() {
        // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
        this.contentDiv.removeEventListener('scroll', this.onScroll);
    },
    methods: {
        // 滚动监听器
        onScroll() {
            // 获取所有锚点元素
            const navContents = document.querySelectorAll('.select-item');
            // 所有锚点元素的 offsetTop
            const offsetTopArr = [];
            navContents.forEach(item => {
                offsetTopArr.push(item.offsetTop);
            });
            console.log(offsetTopArr)
            // 获取当前文档流的 scrollTop
            const scrollTop = this.contentDiv.scrollTop;
            console.log(scrollTop)
            // 定义当前点亮的导航下标
            let navIndex = 0;
            for (let n = 0; n < offsetTopArr.length; n++) {
                // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
                // 那么此时导航索引就应该是n了
                if (scrollTop >= offsetTopArr[n]) {
                    navIndex = n;
                    console.log(navIndex ,n )
                }
            }
            this.active = navIndex;
        },
        // 跳转到指定索引的元素
        scrollTo(index) {
            // 获取目标的 offsetTop
            // css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1
            const targetOffsetTop = document.querySelector(
                `.select-item:nth-child(${index + 1})`
            ).offsetTop;
            console.log(targetOffsetTop)
            // 获取当前 offsetTop
            let scrollTop = this.contentDiv.scrollTop;
            // 定义一次跳 50 个像素，数字越大跳得越快，但是会有掉帧得感觉，步子迈大了会扯到蛋
            const STEP = 50;
            // 判断是往下滑还是往上滑
            if (scrollTop > targetOffsetTop) {
                // 往上滑
                smoothUp();
            } else {
                // 往下滑
                smoothDown();
            }
            // 定义往下滑函数
            function smoothDown() {
                // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
                if (scrollTop < targetOffsetTop) {
                    // 如果和目标相差距离大于等于 STEP 就跳 STEP
                    // 否则直接跳到目标点，目标是为了防止跳过了。
                    if (targetOffsetTop - scrollTop >= STEP) {
                        scrollTop += STEP;
                    } else {
                        scrollTop = targetOffsetTop;
                    }
                    const oDiv = document.querySelector('.el-scrollbar__wrap');
                    oDiv.scrollTop = scrollTop;
                    // 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高
                    requestAnimationFrame(smoothDown);
                }
            }
            // 定义往上滑函数
            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>
主要是对超长元素最外层固定宽高元素的滚动监听，scrollTop也是针对这个元素
切记!!无脑复制粘贴不加改动肯定不行!!