資訊專欄INFORMATION COLUMN
摘要：退一步，只能是實現用戶滾動隱藏瀏覽器上下欄了。先說除了在下可以始終隱藏外，其他瀏覽器只要路由跳轉隱藏就會失敗。解決監聽頁面路由事件先禁止掉插件的滾動。事件中拿到想要的后瀏覽器已經隱藏地址欄和工具欄，放開插件滾動。
參考：js自動隱藏手機瀏覽器地址欄
文章中實現原理其實很簡單，強制頁面高度超過手機屏幕高度，手動滾動時會隱藏瀏覽器自帶地址欄和工具欄（qq瀏覽器不會隱藏工具欄）.
js實現自動隱藏，
window.onload=function(){setTimeout(function() {window.scrollTo(0, 1)}, 0)}
原理：js模擬用戶滾動，scrollTo.
但是我試了各種手機瀏覽器，頁面scrollTop確實變了，都沒出來效果，可能我的寫法有問題吧。
退一步，只能是實現用戶滾動隱藏瀏覽器上下欄了。
先說meta
除了在uc下可以始終隱藏外，其他瀏覽器只要路由跳轉隱藏就會失敗。
js方案
1.放開頁面高度適配，讓頁面內容少的情況高度也超出屏幕高度。
問題：手機瀏覽器自帶滾動效果很差，如果頁面內容很多的時候，滾動不流暢。
試過overflow-scrolling: touch;效果很好。
但是視覺上有頭部和底部的定位，滾動之后只能用position:fixed.
底部定位要做適配，而且fixed有失效問題要解決。
2.better-scroll/vue-scroll插件封裝列表滾動。
問題：如果整個頁面都是列表，會發現用戶要滾動頁面沒有下手的地方。
解決：監聽頁面路由事件beforeRouteEnter,先禁止掉scroll插件的滾動。
讓用戶可以滾動頁面。
window.onscroll事件中拿到想要的scrollTop后（瀏覽器已經隱藏地址欄和工具欄），放開scroll插件滾動。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102652.html
摘要：讓用戶可以滾動頁面。事件中拿到想要的后瀏覽器已經隱藏地址欄和工具欄，放開插件滾動。發現派發的方法在父組件中監聽后獲取位置參數的效果不太好必須要手指貼著滑動才可以這個設置為可以實時派發滾動事件和位置參數其他坑點待發現歡迎大佬一起交流 寫在前面 由于最近一個移動端項目中許多地方有滾動需求, 橫向,縱向的都有,所以就基于better-scroll封裝了一個通用的滾動組件,期間也踩了一些坑,有...
摘要：以下會以其中一個以公積金頁面開發項目作為例子，介紹移動端的一些常見問題和使用作為進行多頁開發的經驗。所以要想在微信開發調試工具中獲取，我們需要使用一種叫做內網穿透的工具。 showImg(https://segmentfault.com/img/remote/1460000015405042?w=800&h=600);兩年前剛接觸移動端開發，剛開始比較疑惑，每次遇到問題都是到社區里提問...
閱讀 3043·2021-09-03 10:33
閱讀 1270·2019-08-30 15:53
閱讀 2618·2019-08-30 15:45
閱讀 3379·2019-08-30 14:11
閱讀 527·2019-08-30 13:55
閱讀 2581·2019-08-29 15:24
閱讀 1906·2019-08-26 18:26
閱讀 3558·2019-08-26 13:41
