欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決Vue頁面固定滾動(dòng)位置的處理辦法

 更新時(shí)間:2017年07月13日 11:41:42   作者:云水搖啊搖  
本篇文章主要介紹了解決Vue固定滾動(dòng)位置的處理辦法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

最近做項(xiàng)目遇到一個(gè)問題,就是Vue滾動(dòng)不固定,網(wǎng)上找了一些資料,說下 vue 固定滾動(dòng)位置的處理辦法.

問題描述:

通常見于 列表頁List -> 詳情頁Detail 的情況, 從列表的某一項(xiàng)x 進(jìn)入到詳情頁, 再返回的時(shí)候, 希望列表的位置固定在x, 而不是回到頂部了.

vue-router 里面是有一個(gè) scrollBehavior 的, 但是這個(gè)玩意只能在 history 模式下面使用, 而我用的 hash 模式.

所以我們要自己實(shí)現(xiàn)嘛, 思路簡單:List 里面監(jiān)聽滾動(dòng), 記錄滾動(dòng)位置 pos, 從 Detail 返回到 List 里面的時(shí)候, 讀取 pos.

 mounted () {
  // 讀
  setTimeut(function(){
   document.body.scrollTop = parseInt(sessionStorage.getItem('pos'));
  }, 1000);
  // 存
  window.onscroll = function () {
   sessionStorage.setItem('pos', document.body.scrollTop);
  }
 }

遇見了一個(gè)問題:

每次返回 List, 都是直接滾動(dòng)到頂部, 每次都是, 每次都是! 把 pos 打印出來, 發(fā)現(xiàn)是 0, 而不是我們所存的值. 日了, 明明切換之前還是的, 回來就不是了.

然后發(fā)現(xiàn)了路由每次切換都會(huì)觸發(fā) onscroll 事件, 日了狗, 為毛.我都沒有滾動(dòng)頁面, 為什么會(huì)觸發(fā) onscroll 事件。

剛開始懷疑 hash 變化會(huì)導(dǎo)致 onscroll 事件的觸發(fā), 所以我就在瀏覽器里面手動(dòng)輸入了幾個(gè)不存在的路由:

/foo
/bar

沒有發(fā)現(xiàn) scroll 被觸發(fā), 所以這個(gè)嫌疑排出.

然后懷疑 vue-router 里面是不是綁定了 scroll 事件, 沒發(fā)現(xiàn)然后又想, 沒綁定 scroll 事件, 那么修改 scrollTop 值會(huì)不會(huì)也觸發(fā) scroll 事件.

好吧還發(fā)現(xiàn)新知識(shí)點(diǎn)了:

scrollTop 值的改變, 的確會(huì)觸發(fā) scroll 事件.

那么我就想, 是不是 vue-router 里面存在修改 scrollTop 值的行為, 也沒有發(fā)現(xiàn).

然后我又想, 數(shù)據(jù)是動(dòng)態(tài)渲染的, 所以是不是和元素的增刪改查相關(guān)。

元素增加-> 頁面高度變了 -> 頁面高度變化, 也觸發(fā) scroll 事件?

所以我用 vue-cli 新建了項(xiàng)目, 放了兩個(gè)沒有增刪改查的路由

然后日了狗的, 我看見從 foo -> bar -> foo, 的時(shí)候, foo的滾動(dòng)條位置還在之前我滾動(dòng)到的地方.

突然想起來瀏覽器是可以自己記錄滾動(dòng)條位置的.

是不是瀏覽器干的?

從詳情頁返回到列表頁面, 列表會(huì)重新渲染, 時(shí)序大概是這樣:
返回列表頁 1
渲染頁面   2

而瀏覽器恢復(fù)滾動(dòng)條的位置的操作, 是在 1 和 2 之間, 這個(gè)時(shí)候就出問題了:如果你頁面上面的數(shù)據(jù)都是渲染出來的, 瀏覽器就會(huì)發(fā)現(xiàn):

頁面的高度<=屏幕的高度, 不存在滾動(dòng)條, 此時(shí) document.body.scrollTop = 0;
所以會(huì)設(shè)置 document.body.scrollTop = 0
修改了 document.body.scrollTop 觸發(fā)了 scroll 事件, scroll 里面又重寫了 pos

等你數(shù)據(jù)渲染結(jié)束之后, 讀到的就是 0了.

如果發(fā)現(xiàn)你頁面高度大于屏幕高度, 但是頁面高度是 n, 而 pos 的值是: n + x, 比當(dāng)前頁面的最大的 scrollTop 值還大, 這個(gè)時(shí)候, document.body.scrollTop 的值就會(huì)等于 n.
當(dāng)你的數(shù)據(jù)渲染結(jié)束, 開始定位, 日了, 沒定準(zhǔn).

所以我們要解決這個(gè)問題.

當(dāng)然是想到了 keep-alive, 剛啟用的時(shí)候, 發(fā)現(xiàn)的確不錯(cuò). 但是同時(shí)也發(fā)現(xiàn):

列表項(xiàng)目靠前的, 往返操作的定位都很準(zhǔn), 越往后越不行, 直接拉到底, 再返回發(fā)現(xiàn)定位到的一般都是第二個(gè)第三個(gè)列表項(xiàng)目.

所以這個(gè)就很有意思了, 我大概猜測了一下瀏覽器的滾動(dòng)位置恢復(fù)行為:

當(dāng) hashchange 的時(shí)候。拿到當(dāng)前頁面的 document.body.scrollTop 值, 和自己存儲(chǔ)的滾動(dòng)條位置。二者取最小的值, 設(shè)置成當(dāng)前的 document.body.scrollTop 的值, 當(dāng)使用 keep-alive 的時(shí)候, 因?yàn)?hashchange 事件處理和頁面渲染是并行的, 所以有時(shí)hashchange 拿到的 document 的高度是已經(jīng)渲染過幾個(gè)元素的高度, 這個(gè)就是為什么定不準(zhǔn)的原因.

好吧, 現(xiàn)在的情況是:

keep-alive 定不準(zhǔn), 不可靠, 所以需要我們自己來重新定位.

ok, 1 先綁定 scroll 事件:

 var map = {};
 window.onscroll = function() {
  map[location.hash] = document.body.scrollTop;
 }

2 再屏蔽掉瀏覽器自動(dòng)恢復(fù)滾動(dòng)位置行為帶來的影響

a 在 hashchange 時(shí)強(qiáng)制 document.body.scrollTop = 0

b 在 scroll 事件里面, 當(dāng) document.body.scrollTop = 0 的時(shí)候不做 存操作.

 var map = {};
 window.onhashchange = function() {
  document.body.scrollTop = 0;
 }
 window.onscroll = function() {
  if (document.body.scrollTop) {
   // 存
   map[location.hash] = document.body.scrollTop;
  } else {
   // 讀
  }
 }

3 在讀操作里面, 設(shè)置一個(gè)定時(shí)任務(wù), 去判斷 document.body.scrollTop 的值和你保存的位置是不是相同的

 var map = {};
 window.onhashchange = function() {
  document.body.scrollTop = 0;
 }
 window.onscroll = function() {
  if (document.body.scrollTop) {
   // 存
   map[location.hash] = document.body.scrollTop;
  } else {
   var timer = null;
   timer = setInterval(function(){
    if (document.body.scrollTop == map[location.hash]) {
     clearInterval(timer);
    } else {
     document.body.scrollTop = map[location.hash];
    }
   }, 20);
  }
 }

到這里實(shí)際上已經(jīng)大體實(shí)現(xiàn)了, 返回恢復(fù)滾動(dòng)條位置的功能, 而上面的代碼需要更多的優(yōu)化,

具體代碼見:項(xiàng)目地址

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue項(xiàng)目中canvas實(shí)現(xiàn)截圖功能

    vue項(xiàng)目中canvas實(shí)現(xiàn)截圖功能

    這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中canvas實(shí)現(xiàn)截圖功能,截取圖片的一部分,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • 解決vue組件沒顯示,沒起作用,沒報(bào)錯(cuò),但該顯示的組件沒顯示問題

    解決vue組件沒顯示,沒起作用,沒報(bào)錯(cuò),但該顯示的組件沒顯示問題

    這篇文章主要介紹了解決vue組件沒顯示,沒起作用,沒報(bào)錯(cuò),但該顯示的組件沒顯示問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • vue?cli使用iview自定義主題遇到的坑及解決

    vue?cli使用iview自定義主題遇到的坑及解決

    vue?cli使用iview自定義主題遇到的坑及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • Vue多環(huán)境代理配置方法思路詳解

    Vue多環(huán)境代理配置方法思路詳解

    多人協(xié)作模式下,修改代理比較麻煩,而且很容易某個(gè)開發(fā)人員會(huì)修改了vue.config.js文件后提交了。接下來通過本文給大家分享Vue多環(huán)境代理配置方法思路詳解,需要的朋友可以參考下
    2019-06-06
  • vue3中關(guān)于路由hash與History的設(shè)置

    vue3中關(guān)于路由hash與History的設(shè)置

    這篇文章主要介紹了vue3中關(guān)于路由hash與History的設(shè)置方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Vue2中pinia刷新后數(shù)據(jù)丟失的問題解決

    Vue2中pinia刷新后數(shù)據(jù)丟失的問題解決

    Pinia是一個(gè)Vue.js狀態(tài)管理庫,如果你在組件中修改了store中的數(shù)據(jù)并刷新了界面,Pinia會(huì)將store中的數(shù)據(jù)重置為初始值,從而導(dǎo)致數(shù)據(jù)丟失的問題,本文就來介紹一下問題解決,感興趣的可以了解一下
    2023-12-12
  • 概述VUE2.0不可忽視的很多變化

    概述VUE2.0不可忽視的很多變化

    本文給大家分析下vue2.0幾個(gè)重要的與自己目前項(xiàng)目相關(guān)的變化,也是vue2.0不可忽視的變化,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧
    2016-09-09
  • Vue2.x Todo之自定義指令實(shí)現(xiàn)自動(dòng)聚焦的方法

    Vue2.x Todo之自定義指令實(shí)現(xiàn)自動(dòng)聚焦的方法

    我們希望用戶雙擊 todo 進(jìn)入編輯狀態(tài)后輸入框自動(dòng)獲取焦點(diǎn),而不是需要先手動(dòng)點(diǎn)一下。這篇文章主要介紹了Vue 2.x Todo之自定義指令實(shí)現(xiàn)自動(dòng)聚焦,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2019-01-01
  • 安裝@vue/cli報(bào)錯(cuò)npmERR gyp ERR問題及解決

    安裝@vue/cli報(bào)錯(cuò)npmERR gyp ERR問題及解決

    這篇文章主要介紹了安裝@vue/cli報(bào)錯(cuò)npmERR gyp ERR問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue中使用js-doc的案例代碼

    vue中使用js-doc的案例代碼

    這篇文章主要介紹了vue中使用js-doc的相關(guān)知識(shí),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2024-01-01

最新評論