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