vue中遇到scrollIntoView無(wú)效問(wèn)題及解決

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

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

vue中遇到scrollIntoView無(wú)效

官方文檔寫的簡(jiǎn)單

Element 接口的scrollIntoView()方法會(huì)滾動(dòng)元素的父容器，使被調(diào)用scrollIntoView()的元素對(duì)用戶可見。

語(yǔ)法：

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

首先容器滾動(dòng)，然后document.geyElementById或者document.querySelector 獲取指定元素，最夠元素調(diào)用scrollIntoView.

參數(shù)：

alignToTop可選

一個(gè)Boolean值：

如果為true，元素的頂端將和其所在滾動(dòng)區(qū)的可視區(qū)域的頂端對(duì)齊。相應(yīng)的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。這是這個(gè)參數(shù)的默認(rèn)值。

如果為false，元素的底端將和其所在滾動(dòng)區(qū)的可視區(qū)域的底端對(duì)齊。相應(yīng)的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

scrollIntoViewOptions 可選

一個(gè)包含下列屬性的對(duì)象：

behavior 可選

定義動(dòng)畫過(guò)渡效果， "auto"或 "smooth"之一。默認(rèn)為"auto"。

block 可選

定義垂直方向的對(duì)齊，"start","center","end", 或 "nearest"之一。默認(rèn)為 “start”。

inline 可選

定義水平方向的對(duì)齊， "start", "center","end", 或 "nearest"之一。默認(rèn)為 “nearest”。

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

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

這樣，在vue中可以使用$nextTick函數(shù)，確保頁(yè)面已渲染完成在去調(diào)scrollIntoView使?jié)L動(dòng)到可視區(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)前的元素滾動(dòng)到瀏覽器窗口的可視區(qū)域內(nèi)。

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

參數(shù)

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

問(wèn)題

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

原因

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

解決

方法一：

利用setTimeout方法

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

方法二：

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

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