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 --><divv-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>