Vue項目中實現描點跳轉scrollIntoView的案例
更新時間：2022年09月16日 08:38:25 作者：JackieDYH
這篇文章主要介紹了Vue項目中實現描點跳轉scrollIntoView的案例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue實現描點跳轉scrollIntoView
方式一：使用a標簽#id形式
<a href="#about" rel="external nofollow" >聯系我們</a> ? <div id="about"> ? ? 跳轉內容 </div>
方式二：scrollIntoView
//需要讓頁面滑動到指定位置
//首先給元素添加id屬性或其他可以獲取元素的屬性
//通過scrollIntoView方法實現頁面跳轉
document.getElementById(id).scrollIntoView({ behavior: "smooth" });
?
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型參數
element.scrollIntoView(scrollIntoViewOptions); // Object型參數
?
//可選
alignToTop:boolean值類型
true:默認值。元素的頂端將和其所在滾動區(qū)的可視區(qū)域的頂端對齊。相應的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。
false:元素的底端將和其所在滾動區(qū)的可視區(qū)域的底端對齊。相應的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">聯系我們</a>
?
methods: {
?? ?// 跳轉到頁面
?? ?goButtom() {
?? ? ?document.getElementById("about").scrollIntoView({
?? ??? ?behavior: "smooth", // 平滑過渡
?? ??? ?block: "start", // 上邊框與視窗頂部平齊。默認值
?? ? ?});
?? ?},
},
?
?
------------------------------------------二------------------------------------------
?
<div id="pronbit" ref="pronbit">需要移動到的位置</div>
?
//選中id
document.getElementById(e).scrollIntoView({
?? ?behavior: "smooth", ?// 平滑過渡
?? ?block: ? ?"start" ?// 上邊框與視窗頂部平齊。默認值
});
// 選中ref
this.$refs.pronbit.scrollIntoView({
?? ?behavior: "smooth", ?// 平滑過渡
?? ?block: ? ?"start" ?// 上邊框與視窗頂部平齊。默認值
});
?
//要是放在mounted()里執(zhí)行使用
this.$refs.pronbit.scrollIntoView();//不然只執(zhí)行一次刷新了也一樣
?
//禁止scrollIntoView
this.$refs.pronbit.scrollIntoView(false);vue遇到scrollIntoView無效問題
官方文檔寫的簡單
Element 接口的scrollIntoView()方法會滾動元素的父容器，使被調用scrollIntoView()的元素對用戶可見。
語法：
element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop);// Boolean型參數 element.scrollIntoView(scrollIntoViewOptions);// Object型參數
首先容器滾動，然后document.geyElementById或者document.querySelector 獲取指定元素，最夠元素調用scrollIntoView.
參數
alignToTop可選
一個Boolean值：
- 如果為true，元素的頂端將和其所在滾動區(qū)的可視區(qū)域的頂端對齊。相應的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。這是這個參數的默認值。
- 如果為false，元素的底端將和其所在滾動區(qū)的可視區(qū)域的底端對齊。相應的scrollIntoViewOptions: {block: "end", inline: "nearest"}。
scrollIntoViewOptions 可選
一個包含下列屬性的對象：
behavior 可選
- 定義動畫過渡效果， "auto"或 "smooth"之一。默認為"auto"。
block 可選
- 定義垂直方向的對齊，"start","center","end", 或 "nearest"之一。默認為 “start”。
inline 可選
- 定義水平方向的對齊， "start", "center","end", 或 "nearest"之一。默認為 “nearest”。
- 實際在vue項目中遇到，當通過點擊事件調用子組件的元素滾動到可視區(qū)域時怎樣都無效。
- 最終發(fā)現，這個方法還有一個限制：需要頁面完全加載后再調用
- 這樣，在vue中可以使用$nextTick函數，確保頁面已渲染完成在去調scrollIntoView使?jié)L動到可視區(qū)域
實現代碼如下
父組件：
showDatePicker(){
? if (this.$refs.pickers) {
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.$refs.pickers.showCurrentDate()
? ? ? ? })
? ? ? }子組件：
? showCurrentDate() {
? ? ? this.$el.querySelector('.active').scrollIntoView({
? ? ? ? block: 'start',
? ? ? }) // 回到頂部
? ? },以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue3繼承并擴展三方組件完成二次封裝,文章使用naiveui的Input組件進行舉例,elementPlus或者其他組件庫同理,并通過代碼示例講解的非常詳細,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue2.0 常用的 UI 庫實例講解，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了vue3.0組合式api的使用小結,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
vue基礎之使用get、post、jsonp實現交互功能示例
這篇文章主要介紹了vue基礎之使用get、post、jsonp實現交互功能,結合實例形式分析了vue.js中get、post及jsonp針對本地文件、網絡接口實現交互功能相關操作技巧,需要的朋友可以參考下2019-03-03
vue中el-select中多選回顯數據后沒法重新選擇和更改的解決
本文主要介紹了vue中el-select中多選回顯數據后沒法重新選擇和更改解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-01-01
本文深入探討了Vue3中新特性shallowReactive的使用和原理,shallowReactive是創(chuàng)建淺響應式對象的API,只對對象的第一層屬性進行響應式轉換,不對嵌套對象處理,有助于性能優(yōu)化和狀態(tài)管理,同時也指出了shallowReactive在使用中的注意事項2024-10-10
這篇文章主要為大家詳細介紹了vue使用動畫實現滾動表格效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue 解決兄弟組件、跨組件深層次的通信操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue開發(fā)之watch監(jiān)聽數組、對象、變量操作分析
這篇文章主要介紹了Vue開發(fā)之watch監(jiān)聽數組、對象、變量操作,結合實例形式分析了vue.js使用Watch針對數組、對象、變量監(jiān)聽相關操作技巧,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue動態(tài)類的幾種使用方法總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01