后續(xù)補(bǔ)充: 頁面css設(shè)置了height: 100%,來避免使用fixed定位彈窗引起的部分機(jī)型兼容問題,因此會(huì)在返回的時(shí)候回到頁面頂部,補(bǔ)充解決辦法: 在彈窗出現(xiàn)的時(shí)候在設(shè)置100%高度,并讓文檔滾動(dòng)到之前滾動(dòng)的位置,彈窗關(guān)閉的時(shí)候取消高度限制,body滾動(dòng)還原
在近期做的一個(gè)移動(dòng)端分享到微信的頁面時(shí),遇到了這樣一個(gè)現(xiàn)象:
在A頁面中部點(diǎn)擊鏈接跳轉(zhuǎn)到B頁面后,按系統(tǒng)返回操作回到A頁面時(shí),
在安卓中刷新重載顯示頁面的頂部開始,
iOS中則直接返回上次瀏覽位置,保存了用戶操作記錄;
針對上述問題,在網(wǎng)上查找了相關(guān)解決辦法,說的都比較概括,用了一天的時(shí)間才解決掉這個(gè)問題(蠢哭(╥╯^╰╥)),下面將我的方法貼出來,希望能給到像我之前一樣走彎路的童鞋一些幫助吧,主要適用于單頁面間的跳轉(zhuǎn)。用到了sessionStorage 和 history的replaceState方法。具體代碼如下:
html部分:
如何高效學(xué)習(xí)
js部分:
$("a[data-h5="1"]").on("click", function () { // 點(diǎn)擊鏈接記錄當(dāng)前頁面滾動(dòng)位置 sessionStorage.setItem("scrollTop", $(".body").scrollTop()); }); // 判斷當(dāng)前頁面是否返回還是直接跳轉(zhuǎn)的,讀取sessionStorage緩存顯示頁面 if (sessionStorage.getItem("scrollTop") != null && sessionStorage.getItem("loadType") == "back") { // 避免載入延時(shí)處理 setTimeout(function(){ // 執(zhí)行緩存信息 $(".body").scrollTop(sessionStorage.getItem("scrollTop")); // 清除上次緩存 sessionStorage.removeItem("scrollTop"); },200); } // 設(shè)置緩存頁面加載來源信息,load:直接跳轉(zhuǎn),back:瀏覽器返回 sessionStorage.setItem("loadType", "load"); // 設(shè)置瀏覽器history,用來監(jiān)測頁面返回 replaceHistory(window.location.href); // 監(jiān)測瀏覽器返回事件,設(shè)置返回頁面緩存狀態(tài) window.addEventListener("popstate", function (e) { // 設(shè)置sessionStorage中頁面返回參數(shù)標(biāo)記 sessionStorage.setItem("loadType", "back"); }, false); function replaceHistory(url) { var state = { title: "title", url: url }; window.history.replaceState(state, "title", url); }
至此,微信瀏覽器按返回不能保存之前界面的瀏覽位置信息的問題就解決了,如果有更好的解決辦法,歡迎大家一起交流討論哈~~
一個(gè)小問題花費(fèi)那么多的時(shí)間來解決真的很頭疼,自身能力真的還差太多。。。修煉中。。。。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/95819.html
摘要:從本人這兩個(gè)月移動(dòng)實(shí)踐的經(jīng)驗(yàn)來看,微信的里面和的滑動(dòng)效果無論是在安卓還是下的體驗(yàn)都很一般,有明顯的卡頓現(xiàn)象,在安卓下面還會(huì)出現(xiàn)滑動(dòng)過快的時(shí)候在頁面停下來之后滾動(dòng)條才閃到相應(yīng)位置的現(xiàn)象。 前言 在微信里面瀏覽頁面的時(shí)候,有一個(gè)很管用的方法可以區(qū)分這個(gè)頁面是原生的還是H5形式的。隨便打開一個(gè)頁面,用力往下扯的時(shí)候,如果頁面上方出現(xiàn)了黑底,黑底上有一行諸如網(wǎng)頁由game.weixin.qq....
閱讀 2582·2023-04-26 02:18
閱讀 1327·2021-10-14 09:43
閱讀 3899·2021-09-26 10:00
閱讀 7378·2021-09-22 15:28
閱讀 2602·2019-08-30 15:54
閱讀 2668·2019-08-30 15:52
閱讀 551·2019-08-29 11:30
閱讀 3527·2019-08-29 11:05