vue实现元素快速定位

需求：一个列表中有可能会有N多条数据，我在选择一个item查看详情的情况下。如果上下滚动想要再次找到这个位置的时候可能会很麻烦了，需要滚动滚动再滚动。所以，就需要一个悬浮的上下箭头去快速定位到刚才的位置。以下是我做的效果~~~

实现思路：

1.首先要监听到滚动条滚动事件

<div @click="scrollFun" class="parentBox"> // 这里如果@click没有监听到，可以试试@click.native
    <div v-for="item in 2000">
        <p @click="clickItem">{{item}}</p> // 每一行要展示的东西
    </div>
</div>

2.点击这一行的时候获取这个item距离父元素顶部的距离（因为我这个数据比较多并且是一个tree树，所以我用的是获取这个元素的索引然后乘以一行的高度30px，也能得到它距离顶部的距离

clickItem({index}) { // index表示这一行数据的索引
    this.itemTop = index * 30; // 这里30的意思是我这一行的高度为30，这一行的索引*30就是距离父元素顶点的高度
}

3.滚动的时候去判断是否在可视区域，并且判断它在遮挡在上面还是下面

scrollFun() { // 监听到滚动就触发这个函数
    this.isHoverIcon = false; //首先把悬浮的这个图片隐藏
    let scrollTop = document.querySelector('.parentBox').scrollTop; //滚动条的高度
    if (this.checkedItem && (scrollTop > this.itemTop + 30 || scrollTop < this.itemTop - 460) { // 460表示我的父盒子高度为460, 30表示我每一行的高度为30
        this.isHoverIcon = true;
        if (scrollTop > this.itemTop + 30) {
            this.hoverIcon = 'shangjiantou';
        } else if (scrollTop < this.itemTop - 460) {
            this.hoverIcon = 'xiajiantou';
        }
    }
}
// this.isHoverIcon 表示是否展示悬浮的Icon
// this.checkedItem 表示是否有选中的行，如果没有就无论什么情况都不会展示Icon

至此位置，点击icon快速定位就做好了，icon悬浮的css我就不在这里写了。如果有什么问题可直接私信我，嘻嘻