vue 列表自動滾動到制定位置

2021-10-06 14:43:39 字數 695 閱讀 8264

背景:業務開發中遇到乙個需求,是要求跳轉到新頁面,並預設選中內容,如果內容在列表的位置靠後,就需要滾動到可見範圍內。

實現:

1. 迴圈實現列表,為每個item新增id,**:id="'item' + index"**,方便後續查詢對應項

item: }

2. 待列表載入完後,執行滾動事件

// count 預設選中內容的序號

document.getelementbyid('item' + count).scrollintoview()

知識點:

1. scrollintoview:element.scrollintoview() 方法讓當前的元素滾動到瀏覽器視窗的可視區域內。

2. 未避免事件執行失敗,一定要在頁面載入完成才能觸發事件,推薦2種方式

2.1 在mounted事件中觸發

2.2 在執行事件時,用this.$nexttick保證頁面載入完成

this.$nexttick(() => )
**:以下是乙個小demo,可直接執行

item: }

js滾動到指定位置

向上的滾動距離,或者說滾動出可視區域的距離 獲得滾動的畫素數 var intelemscrolltop someelement.scrolltop 設定滾動的距離 element.scrolltop intvalue scrolltop賦值為負數的時候,scrolltop賦值為0 如果乙個元素不能滾...

頁面如何自動滾動到指定位置

如何實現頁面載入完成後自動滾動到指定的位置?window.location.hash 注意到url後面帶有 comm這個引數。當頁面載入完畢後,瀏覽器就會自動滾動到dom物件id comm 的位置。附window.location的其他屬性 hash 設定或獲取 href 屬性中在井號 後面的分段。...

jQuery滾動到頁面指定位置

在前端的頁面開發中,經常會碰到頁面跳轉問題,這個跳轉指的是頁面內部跳轉到指定位置,通常是在有滾動條的情況下,網上介紹的方法很多,本文主要是介紹jquery函式中的乙個小trick,focus 函式。先來看一下jquery的官方文件 上面的文件扯了一堆,半點沒看到頁面跳轉的影子,但是在實際應用中你會發...