vue方式
<template>
<div class="doc">
<!-- 判断是否还在渲染期间 -->
<div class="fixed" v-show="loading">页面仍在渲染中,请稍后</div>
<div class="green" v-show="!loading">√目标元素渲染完成,进行滚动</div>
<div class="list_div" v-for="item in 10" :key="item">
<p>{{ item.toString().padStart(5, "0") }}:{{ set_title() }}</p>
</div>
<!-- 尽量不要使用index做key,要用唯一id -->
<div
v-for="(item, index) in list"
:key="index + '_'"
class="list_div title"
:data-index="index"
>
模拟的渲染极慢的元素,index==={{ index }}
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
list: [],
loading: true,
};
},
computed: {},
watch: {},
created() {
//需要跳转的位置----------------------------------------------------!!
const index = 3;
//定时器间隔
const time = 1000;
if (index) {
let interval = setInterval(() => {
this.search(index) && (clearInterval(interval), (this.loading = false));
}, time);
}
},
mounted() {
//模拟的渲染慢的数据
setTimeout(() => {
this.list = [1, 2, 3, 4];
}, 1500);
},
methods: {
set_title() {
//最上方渲染极快的数据
const list = ["哎呀", "你好", "搞什么啊", "我服了", "真的强"];
return (
list[this.random(0, 4)] +
list[this.random(0, 4)] +
list[this.random(0, 4)] +
list[this.random(0, 4)]
);
},
random(n, m) {
return parseInt(Math.random() * (m - n) + n);
},
search(number) {
const div = document.querySelectorAll(".title");
if (div.length == 0) {
return;
}
const list = [].slice.call(div);
try {
return list.map((item) => {
if (item.dataset.index == number) {
const rect = item.getBoundingClientRect();
//元素滚动
item.scrollIntoView({ behavior: "smooth" });
console.log(
"找到了_:",
"rect_top",
rect.top,
"rect_left",
rect.left
);
return true;
}
}).length;
} catch (error) {
console.log("err", error);
return false;
}
},
},
};
</script>
<style lang='scss' scoped>
.list_div {
height: 300px;
width: 400px;
border: 1px solid;
}
.fixed {
position: fixed;
top: 40px;
right: 40px;
background-color: #000;
color: #fff;
padding: 5px 15px;
}
.green {
position: fixed;
top: 40px;
right: 40px;
padding: 5px 15px;
background-color: green;
color: #fff;
}
</style>