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

參考：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;效果很好。
          可是視覺上有頭部和底部的定位，滾動以後只能用position:fixed.
          底部定位要作適配，並且fixed有失效問題要解決。
 2.better-scroll/vue-scroll插件封裝列表滾動。
    問題：若是整個頁面都是列表，會發現用戶要滾動頁面沒有下手的地方。
    解決：監聽頁面路由事件beforeRouteEnter,先禁止掉scroll插件的滾動。
          讓用戶能夠滾動頁面。
          window.onscroll事件中拿到想要的scrollTop後（瀏覽器已經隱藏地址欄和工具欄），放開scroll插件滾動。