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