欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端滾動(dòng)錨點(diǎn)三個(gè)常用方案(點(diǎn)擊后頁(yè)面滾動(dòng)到指定位置)

 更新時(shí)間：2025年01月10日 09:42:39   作者：Gaga??  
這篇文章主要給大家介紹了關(guān)于前端滾動(dòng)錨點(diǎn)的三個(gè)常用方案,實(shí)現(xiàn)的效果就是點(diǎn)擊后頁(yè)面滾動(dòng)到指定位置,三種方法分別是scrollIntoView、scrollTo和scrollBy,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

三個(gè)常用方案：

1.scrollintoView

把調(diào)用該方法的元素滾動(dòng)到屏幕的指定位置，中間，底部，或者頂部

優(yōu)點(diǎn)：方便，只需要獲取元素然后調(diào)用

缺點(diǎn)：不好精確控制，只能讓元素指定滾動(dòng)到中間，頂部，底部，沒(méi)法設(shè)置偏移

block可以設(shè)置為center，end，start等來(lái)控制在頁(yè)面顯示的位置。

注意的就是

<script setup>
import {onMounted, ref } from 'vue'
import {useRoute }from 'vue-router'
const { query }= useRoute();
const target = query.target
onMounted(()=>{
   document.getElementById(target)?.scrollIntoView({
   block:'center'
  })
})
</script>
 
<template>
  <button>美妝</button>
  <button>數(shù)碼</button>
  <button>美食</button>
  <button>家居</button>
  <button>黃金</button>
 <div class="home" id="home">
   // 五個(gè)樓層
   <div class="part" id="part1">美妝</div>
   <div class="part" id="part2">數(shù)碼</div>
   <div class="part" id="part3">美食</div>
   <div class="part" id="part4">家居</div>
   <div class="part" id="part5">黃金</div>
 </div>
</template>
 
<style>
.home {
  width: 1000px;
  margin: 0 auto;
  height: 90vh;
  overflow-y: scroll;
}
.part {
  margin-top: 20px;
  border: 1px solid red;
  height: 600px;
}
.needData {
  height: 600px;
}
</style>

2.scrollTo

把可滾動(dòng)元素滾動(dòng)到指定x，y坐標(biāo)優(yōu)點(diǎn):可以精確控制到具體多少px

缺點(diǎn)：得先獲取到x，y坐標(biāo)

需要注意的是，這個(gè)方法的調(diào)用者并不是要看到的元素，而是可滾動(dòng)的元素。像方法一，調(diào)用scrollintoView方法的是五個(gè)樓層本身，但是如果是調(diào)

用scrollTo的話是調(diào)用他們的父級(jí)元素（id="home"的div盒子）它才是可滾動(dòng)的元素.

<script setup>
import {onMounted, ref } from 'vue'
import {useRoute }from 'vue-router'
const { query }= useRoute();
const target = query.target
onMounted(()=>{
   const targetDom = document.getElementById(target);
   const targetRect = targetDom.getBoundingClientRect();
   document.getElementById(home)?.scrollTo(targetRect.x, targetRect.y - 100);
})
</script>

<template>
  <button>美妝</button>
  <button>數(shù)碼</button>
  <button>美食</button>
  <button>家居</button>
  <button>黃金</button>
 <div class="home" id="home">
   <div class="part" id="part1">美妝</div>
   <div class="part" id="part2">數(shù)碼</div>
   <div class="part" id="part3">美食</div>
   <div class="part" id="part4">家居</div>
   <div class="part" id="part5">黃金</div>
 </div>
</template>

3.scrollBy 

滾動(dòng)指定的x，y距離。也就是讓他滾動(dòng)一定距離，不指定坐標(biāo)

優(yōu)點(diǎn):當(dāng)我們只是做移動(dòng)，而不是滾到某個(gè)指定的元素時(shí)

缺點(diǎn):得自己算出多少距離

這個(gè)方法用的少就不舉例了

最后：要注意的點(diǎn)，記住這么幾個(gè)操作

1，如果是打開就滾動(dòng)到指定位置，vue/react項(xiàng)目一定要在你頁(yè)面數(shù)據(jù)渲染完成后滾動(dòng)

2，如果不含有請(qǐng)求，記得在onMounted(vue)，或者useEffect(react)中進(jìn)行滾動(dòng)操作，如果是頁(yè)面滾動(dòng)，可能還要在加一個(gè)小延遲（setTimeout）

3，如果頁(yè)面的數(shù)據(jù)是請(qǐng)求來(lái)的，請(qǐng)確保數(shù)據(jù)渲染完成后進(jìn)行滾動(dòng)

頁(yè)面滾動(dòng)是會(huì)記錄上一次滾動(dòng)狀態(tài)的，在頁(yè)面渲染好后又會(huì)滾回去。記錄頁(yè)面滾動(dòng)這個(gè)現(xiàn)象一般只限于同步引入的組件，異步的不會(huì)（沒(méi)有滾動(dòng)記錄）

總結(jié) 

到此這篇關(guān)于前端滾動(dòng)錨點(diǎn)三個(gè)常用方案的文章就介紹到這了,更多相關(guān)前端滾動(dòng)到指定位置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論