vue 实现锚点定位点击列表滑动相应位置

项目需求要根据用户点击的不同列表做不同的定位
实现方式scrollview

1. 绑定列表点击事件传入当前下标

<ul>
    <li v-for="(item, index) in stuArr" :key="index" @click="jump(index)" :style=" activeStep === index ? yangshi : yangshi1">
        <div class="avatar-div">
            <svg-icon class="avatar" icon-class="icon-avatar"></svg-icon>
            <div class="name" :style="{color: activeStep === index ? '#22AD7E' : '#666'}">{{ isfEducation }}</div>
        </div>
        <div class="fraction-div">
            <div :class="item.isMark ? 'fraction' : 'fraction1'">{{ item.isMark ? item.totalScore : notCorrected }}</div>
            <div class="ion" v-if="item.isMark">分</div>
        </div>
    </li>
</ul>

2. 给需要动态滚动的视图绑定scroll

<div class="subject-list-wrap-relot" @scroll="onScroll">
    <div class="subject-list-wrap-relot-const" v-for="(item, index) in stuArr" :key="index">
        <!-- 学生信息 -->
        <div class="personalInformation">
            <div class="avatar-div">
            <svg-icon class="avatar" icon-class="icon-avatar"></svg-icon>
            <div class="name">{{ isfEducation }}</div>
            <div class="fraction">{{ item.isMark ? item.totalScore : '' }}</div>
        </div>
        <div class="rewardsAndPunishments">
            <div class="row-item-award">
                <span class="icon-be-improved" @click="saveRewardScore(item, 'T02', 'class')">
                <svg-icon class="svg-icon" icon-class="icon-be-improved" />待改进</span>
                <span class="icon-award" @click="saveRewardScore(item, 'T01', 'class')">
                <svg-icon class="svg-icon" icon-class="icon-award" />奖励</span>
            </div>
        </div>
    </div>
</div>

3.处理点击事件和滚动事件

jump(index) {
    // .subject-list-wrap-relot-const 必须和你在页面中取的一致
    var items = document.querySelectorAll(".subject-list-wrap-relot-const"); 
    for (var i = 0; i < items.length; i++) {
        if (index === i) {
            items[i].scrollIntoView({
                block: "start", //默认跳转到顶部
                behavior: "smooth" //滚动的速度
            });
        }
    }
},
onScroll(e) {
    console.log(e)
    let scrollItems = document.querySelectorAll(".subject-list-wrap-relot-const");
    for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge =
        e.target.scrollTop >=
        scrollItems[i].offsetTop - scrollItems[0].offsetTop;
        if (judge) {
            this.activeStep = i;
            break;
        }
    }
},

4. css样式

.subject-list-wrap-relot{
    width: 79%;
    height: 100%;
    background: #F8F8F8;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    .subject-list-wrap-relot-const {
        width: 1250px;
        background: #FFFFFF;
        border-radius: 10px;
        padding: 29px;
        margin-top: 31px;
        box-sizing: border-box;
    }
}