Vue項目中實現(xiàn)描點跳轉(zhuǎn)scrollIntoView的案例
更新時間：2022年09月16日 08:38:25 作者：JackieDYH
這篇文章主要介紹了Vue項目中實現(xiàn)描點跳轉(zhuǎn)scrollIntoView的案例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue實現(xiàn)描點跳轉(zhuǎn)scrollIntoView
方式一：使用a標(biāo)簽#id形式
<a href="#about" rel="external nofollow" >聯(lián)系我們</a> ? <div id="about"> ? ? 跳轉(zhuǎn)內(nèi)容 </div>
方式二：scrollIntoView
//需要讓頁面滑動到指定位置
//首先給元素添加id屬性或其他可以獲取元素的屬性
//通過scrollIntoView方法實現(xiàn)頁面跳轉(zhuǎn)
document.getElementById(id).scrollIntoView({ behavior: "smooth" });
?
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型參數(shù)
element.scrollIntoView(scrollIntoViewOptions); // Object型參數(shù)
?
//可選
alignToTop:boolean值類型
true:默認(rèn)值。元素的頂端將和其所在滾動區(qū)的可視區(qū)域的頂端對齊。相應(yīng)的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。
false:元素的底端將和其所在滾動區(qū)的可視區(qū)域的底端對齊。相應(yīng)的scrollIntoViewOptions: {block: "end", inline: "nearest"}。
?
//可選
scrollIntoViewOptions ：
behavior ：定義動畫過渡效果，值為auto或smooth。
block ：定義垂直方向的對齊，值為start/center/end/nearest。
inline ：定義水平方向的對齊，值為start/center/end/nearest。
?
//實例
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});使用
<a @click="goButtom">聯(lián)系我們</a>
?
methods: {
?? ?// 跳轉(zhuǎn)到頁面
?? ?goButtom() {
?? ? ?document.getElementById("about").scrollIntoView({
?? ??? ?behavior: "smooth", // 平滑過渡
?? ??? ?block: "start", // 上邊框與視窗頂部平齊。默認(rèn)值
?? ? ?});
?? ?},
},
?
?
------------------------------------------二------------------------------------------
?
<div id="pronbit" ref="pronbit">需要移動到的位置</div>
?
//選中id
document.getElementById(e).scrollIntoView({
?? ?behavior: "smooth", ?// 平滑過渡
?? ?block: ? ?"start" ?// 上邊框與視窗頂部平齊。默認(rèn)值
});
// 選中ref
this.$refs.pronbit.scrollIntoView({
?? ?behavior: "smooth", ?// 平滑過渡
?? ?block: ? ?"start" ?// 上邊框與視窗頂部平齊。默認(rèn)值
});
?
//要是放在mounted()里執(zhí)行使用
this.$refs.pronbit.scrollIntoView();//不然只執(zhí)行一次刷新了也一樣
?
//禁止scrollIntoView
this.$refs.pronbit.scrollIntoView(false);vue遇到scrollIntoView無效問題
官方文檔寫的簡單
Element 接口的scrollIntoView()方法會滾動元素的父容器，使被調(diào)用scrollIntoView()的元素對用戶可見。
語法：
element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop);// Boolean型參數(shù) element.scrollIntoView(scrollIntoViewOptions);// Object型參數(shù)
首先容器滾動，然后document.geyElementById或者document.querySelector 獲取指定元素，最夠元素調(diào)用scrollIntoView.
參數(shù)
alignToTop可選
一個Boolean值：
- 如果為true，元素的頂端將和其所在滾動區(qū)的可視區(qū)域的頂端對齊。相應(yīng)的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。這是這個參數(shù)的默認(rèn)值。
- 如果為false，元素的底端將和其所在滾動區(qū)的可視區(qū)域的底端對齊。相應(yīng)的scrollIntoViewOptions: {block: "end", inline: "nearest"}。
scrollIntoViewOptions 可選
一個包含下列屬性的對象：
behavior 可選
- 定義動畫過渡效果， "auto"或 "smooth"之一。默認(rèn)為"auto"。
block 可選
- 定義垂直方向的對齊，"start","center","end", 或 "nearest"之一。默認(rèn)為 “start”。
inline 可選
- 定義水平方向的對齊， "start", "center","end", 或 "nearest"之一。默認(rèn)為 “nearest”。
- 實際在vue項目中遇到，當(dāng)通過點擊事件調(diào)用子組件的元素滾動到可視區(qū)域時怎樣都無效。
- 最終發(fā)現(xiàn)，這個方法還有一個限制：需要頁面完全加載后再調(diào)用
- 這樣，在vue中可以使用$nextTick函數(shù)，確保頁面已渲染完成在去調(diào)scrollIntoView使?jié)L動到可視區(qū)域
實現(xiàn)代碼如下
父組件：
showDatePicker(){
? if (this.$refs.pickers) {
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.$refs.pickers.showCurrentDate()
? ? ? ? })
? ? ? }子組件：
? showCurrentDate() {
? ? ? this.$el.querySelector('.active').scrollIntoView({
? ? ? ? block: 'start',
? ? ? }) // 回到頂部
? ? },以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
watch的基本用法是在Vue實例中定義一個watch對象,該對象內(nèi)部包含需要監(jiān)聽的數(shù)據(jù)項和對應(yīng)的回調(diào)函數(shù)，這篇文章主要介紹了vue2中watch的使用,需要的朋友可以參考下2024-01-01
打開尤大大的GitHub，發(fā)現(xiàn)多了個叫 petite-vue 的東西,Vue3 和 Vite 還沒學(xué)完呢，又開始整新東西了？本文就來介紹一下2021-07-07
父子組件生命周期及子組件獲取數(shù)據(jù)傳值問題剖析
這篇文章主要介紹了父子組件生命周期及子組件獲取數(shù)據(jù)問題剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-10-10
vue?this.$router和this.$route區(qū)別解析及路由傳參的2種方式?&&?this.$route
this.$router?相當(dāng)于一個全局的路由器對象,包含了很多屬性和對象（比如?history?對象）,任何頁面都可以調(diào)用其?push(),?replace(),?go()?等方法,本文給大家介紹Vue中this.$router與this.$route的區(qū)別?及push()方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了前端Vue中常用rules校驗規(guī)則詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
詳解在Vue.js編寫更好的v-for循環(huán)的6種技巧
這篇文章主要介紹了詳解在Vue.js編寫更好的v-for循環(huán)的6種技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要為大家詳細(xì)介紹了vue使用swiper.js重疊輪播組建樣式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)websocket客服聊天功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家介紹了ant-design-vue按鈕樣式擴展方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
VUE?Element修改el-input和el-select長度的具體步驟
這篇文章主要給大家介紹了關(guān)于VUE?Element修改el-input和el-select長度的具體步驟,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12