vue中遇到scrollIntoView無效問題及解決

更新時間：2023年05月19日 09:56:40 作者：°折月煮酒

這篇文章主要介紹了vue中遇到scrollIntoView無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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”。

實(shí)際在vue項目中遇到，當(dāng)通過點(diǎn)擊事件調(diào)用子組件的元素滾動到可視區(qū)域時怎樣都無效。

最終發(fā)現(xiàn)，這個方法還有一個限制：需要頁面完全加載后再調(diào)用

這樣，在vue中可以使用$nextTick函數(shù)，確保頁面已渲染完成在去調(diào)scrollIntoView使?jié)L動到可視區(qū)域

實(shí)現(xiàn)代碼如下

父組件：

showDatePicker(){
? if (this.$refs.pickers) {
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.$refs.pickers.showCurrentDate()
? ? ? ? })
? ? ? }

子組件：

? showCurrentDate() {
? ? ? this.$el.querySelector('.active').scrollIntoView({
? ? ? ? block: 'start',
? ? ? }) // 回到頂部
? ? },

scrollIntoView在vue里失效---kalrry

Element.scrollIntoView() 方法讓當(dāng)前的元素滾動到瀏覽器窗口的可視區(qū)域內(nèi)。

element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型參數(shù)
element.scrollIntoView(scrollIntoViewOptions); // Object型參數(shù)

參數(shù)

alignToTop： 一個boolean值
//true：等價于 scrollIntoViewOptions: {block: “start”, inline: “nearest”}
//false：等價于scrollIntoViewOptions: {block: “end”, inline: “nearest”}
scrollIntoViewOptions： 對象
behavior: 定義動畫過度效果， ‘a(chǎn)uto / smooth' , 默認(rèn) ‘a(chǎn)uto'
block：定義垂直方向的對齊， “start / center / end / nearest”。默認(rèn)為 “start”。
inline 定義水平方向的對齊， “start / center / end / nearest”。默認(rèn)為 “nearest”

問題

按照js標(biāo)準(zhǔn)選擇元素方式，scrollIntoView在vue里失效

原因

該方法需在頁面完全加載后才能生效

解決

方法一：

利用setTimeout方法

?? ?setTimeout(function(){
? ? ? ? document.getElementById(target).scrollIntoView();
? ? ?},100)

方法二：

運(yùn)用vue中的this.$nextTick方法

?? ?this.$nextTick(()=>{
?? ?//對象方式設(shè)置滾動狀態(tài)
? ? ? ?document.querySelector("#01commonly").scrollIntoView({
? ? ? ? ? block: 'end',
? ? ? ? ? behavior: 'smooth'
? ? ? ? })
?? ?})