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>