Vue中scrollIntoView()方法詳解與實際運用舉例
前言
因為工作中用到了錨點設(shè)置，滾動定位到列表的某一行，常用的總是出問題，后來扒拉出了這個屬性，詳細研究了下方便 日 后使用
一、介紹scrollIntoView（）的詳細屬性
1、簡介
該scrollIntoView()方法將調(diào)用它的元素滾動到瀏覽器窗口的可見區(qū)域。
- 根據(jù)其他元素的布局，元素可能無法完全滾動到頂部或底部。
- 頁面（容器）可滾動時才有用！
2、語法
element.scrollIntoView（）; // 等同于element.scrollIntoView(true) element.scrollIntoView（alignToTop）; //布爾參數(shù) element.scrollIntoView（scrollIntoViewOptions）; //對象參數(shù)
3、語法參數(shù)
| align To Top | [可選]，目前之前這個參數(shù)得到了良好的支持 |
|---|---|
| true | 元素的頂部將對齊到可滾動祖先的可見區(qū)域的頂部。對應(yīng)于scrollIntoViewOptions: {block: “start”, inline: “nearest”}。這是默認值 |
| false | 元素的底部將與可滾動祖先的可見區(qū)域的底部對齊。對應(yīng)于scrollIntoViewOptions: {block: “end”, inline: “nearest”}。 |
| scrollIntoViewOptions | [可選]，目前這個參數(shù)瀏覽器對它的支持并不好，可以查看下文兼容性詳情 |
|---|---|
| behavior | [可選]定義過渡動畫。“auto”,“instant"或"smooth”。默認為"auto"。 |
| block | [可選] “start”，“center”，“end"或"nearest”。默認為"center"。 |
| inline | [可選] “start”，“center”，“end"或"nearest”。默認為"nearest"。 |
4、示例
var element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
5、應(yīng)用場景
URL中hash標記的進化
聊天窗口滾動顯示最新的消息
往一個列表添加item后滾動顯示最新的添加的item
回到頂部(#)
滾動到指定位置(#xxx)
6、瀏覽器兼容性
二、實際運用
如圖所示一個類似微信一樣的electron項目，這個是消息列表，然后有消息過來的時候，就是右下角托盤消息提醒的時候，點擊消息提示中的某一項，然后就打開這個頁面，定位到選中的某一個，再右邊顯示詳細信息
先說下具體思路：在Vue 3中，可以使用v-for指令的ref屬性來綁定每個列表項的引用。然后，使用computed屬性來獲取要滾動到的元素，并使用scrollIntoView方法將其滾動到可見區(qū)域。
以下是在Vue 3中使用v-for和computed實現(xiàn)根據(jù)列表的索引定位到某一行的示例：
<template>
<div>
<div v-for="(item, index) in list" :key="index" :ref="'listItem-' + index">{{ item }}</div>
</div>
</template>
<script>
import { computed, ref } from 'vue';
export default {
setup() {
const list = ref(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']);
const activeIndex = ref(null);
// 計算要滾動到的元素
const activeElement = computed(() => {
if (activeIndex.value !== null) {
return document.querySelector(`[ref="listItem-${activeIndex.value}"]`);
}
return null;
});
// 滾動到指定的列表項
const scrollToIndex = (index) => {
activeIndex.value = index;
if (activeElement.value) {
activeElement.value.scrollIntoView();
}
};
return {
list,
scrollToIndex
};
}
};
</script>在上面的代碼中，使用v-for指令循環(huán)遍歷列表，并將每個列表項的引用綁定到ref屬性上。然后，使用computed屬性來計算要滾動到的元素。在scrollToIndex方法中，使用activeIndex來存儲要滾動到的元素的索引，并使用activeElement計算出要滾動到的元素。最后，使用scrollIntoView方法將該元素滾動到可見區(qū)域。
在組件中觸發(fā)scrollToIndex方法，可以在需要滾動到指定列表項時調(diào)用該方法。例如，可以在按鈕的點擊事件處理程序中調(diào)用scrollToIndex方法：
<button @click="scrollToIndex(3)">Scroll to Index 3</button>
在上面的代碼中，單擊按鈕將調(diào)用scrollToIndex方法，并將3作為參數(shù)傳遞給該方法，以滾動到索引為3的列表項。
再看下我具體寫的：
watch(clickId, async() => {
// console.log('clickId changed from', oldValue, 'to', newValue)
// eslint-disable-next-line
const data = await window.app.windowGetData(store.userBaseInfo.username + '.data.warn')
let code = 0
const index = data.findIndex((item:any) => (
item.configId === clickId.value
))
data.forEach((item:any) => {
if (item.configId === clickId.value) {
code = Number(item.code)
}
})
if (index !== -1) {
itemClick(index, code)
scrollToIndex() // 點擊托盤消息的時候觸發(fā)這里
}
})
// 計算要滾動到的元素
const activeElement = computed(() => {
if (activeIndex.value) {
return document.getElementById(`listItem-${ activeIndex.value }`)
}
return null
})
// 滾動到指定的列表項
const scrollToIndex = () => {
if (activeElement.value) {
activeElement.value.scrollIntoView(false)
}
}
完事！
總結(jié)
到此這篇關(guān)于Vue中scrollIntoView()方法詳解與實際運用的文章就介紹到這了,更多相關(guān)Vue scrollIntoView()方法詳解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家分享一篇vue項目中的webpack-dev-sever配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
在現(xiàn)代前端開發(fā)中,Vue.js憑借其輕量級和易用性,成為了很多開發(fā)者的首選框架,本文將結(jié)合實際案例,詳細講解Vue-Router路由懶加載的用法,需要的可以參考下2024-11-11
vue 使用Jade模板寫html,stylus寫css的方法
這篇文章主要介紹了vue 使用Jade模板寫html，stylus寫css的方法,文中還給大家提到了使用jade注意事項，需要的朋友可以參考下2018-02-02
這篇文章主要為大家介紹了Vue?element樹形控件添加虛線，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-11-11
這篇文章主要為大家介紹了Vue執(zhí)行流程及渲染解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了vue中echarts點擊事件點擊一次多次觸發(fā)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章較詳細的給大家介紹了vue組件之間傳值的方法，在 Vue 中，可以使用props向子組件傳遞數(shù)據(jù)。具體傳遞方法大家跟隨腳本之家小編一起看看吧2018-08-08
這篇文章主要介紹了vue截取視頻第一幀的圖片問題,基本就是用cavas進行繪制，解決一下跨域問題，截視頻第一幀，然后根據(jù)視頻原本的寬高進行繪制，最后轉(zhuǎn)一下圖片格式即可，需要的朋友可以參考下2022-11-11
在Vue中,路由攔截器主要用于在導航到某個路由前或者離開某個路由時進行攔截和處理,下面給大家介紹vue中的路由攔截器的作用,感興趣的朋友一起看看吧2024-07-07
vue后臺系統(tǒng)管理項目之角色權(quán)限分配管理功能(示例詳解)
這篇文章主要介紹了vue后臺系統(tǒng)管理項目-角色權(quán)限分配管理功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09