vue中遇到scrollIntoView無效

官方文檔寫的簡單

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

語法：

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ū)域的頂端對齊。相應(yīng)的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。這是這個(gè)參數(shù)的默認(rèn)值。

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

• scrollIntoViewOptions 可選

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

• behavior 可選

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

• block 可選

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

• inline 可選

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

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

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

這樣，在vue中可以使用$nextTick函數(shù)，確保頁面已渲染完成在去調(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： 對象
behavior: 定義動(dòng)畫過度效果， ‘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è)置滾動(dòng)狀態(tài)
? ? ? ?document.querySelector("#01commonly").scrollIntoView({
? ? ? ? ? block: 'end',
? ? ? ? ? behavior: 'smooth'
? ? ? ? })
?? ?})

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論