移動端 滾動隱藏瀏覽器位址列和工具欄

摘要： 參考：js自動隱藏手機瀏覽器位址列 文章中實現原理其實很簡單，強制頁面高度超過手機螢幕高度，手動滾動時會隱藏瀏覽器自帶位址列和工具欄（qq瀏覽器不會隱藏工具欄）. js實現自動隱藏， window.onload=function(){set...

參考：js自動隱藏手機瀏覽器位址列

文章中實現原理其實很簡單，強制頁面高度超過手機螢幕高度，手動滾動時會隱藏瀏覽器自帶位址列和工具欄（qq瀏覽器不會隱藏工具欄）.

js實現自動隱藏，

window.onload=function(){setTimeout(function() {window.scrollTo(0, 1)}, 0)}

原理：js模擬使用者滾動，scrollTo.

但是我試了各種手機瀏覽器，頁面scrollTop確實變了，都沒出來效果，可能我的寫法有問題吧。

退一步，只能是實現使用者滾動隱藏瀏覽器上下欄了。

先說meta

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="browsermode" content="application">
<meta name="full-screen" content="yes" />
<meta name="x5-fullscreen" content="true" />
<meta name="x5-page-mode" content="app" />
<meta name="360-fullscreen" content="true" />

除了在uc下可以始終隱藏外，其他瀏覽器只要路由跳轉隱藏就會失敗。

js方案

1.放開頁面高度適配，讓頁面內容少的情況高度也超出螢幕高度。
問題：手機瀏覽器自帶滾動效果很差，如果頁面內容很多的時候，滾動不流暢。
試過overflow-scrolling: touch;效果不理想
 2.better-scroll/vue-scroll外掛封裝列表滾動。
問題：如果整個頁面都是列表，會發現使用者要滾動頁面沒有下手的地方。
解決：監聽頁面路由事件beforeRouteEnter,先禁止掉scroll外掛的滾動。
讓使用者可以滾動頁面。
window.onscroll事件中拿到想要的scrollTop後（瀏覽器已經隱藏位址列和工具欄），放開scroll外掛滾動。