微信瀏覽器禁止頁面下拉查看網址

時間 2019-11-08

原文原文鏈接

正常狀況下，微信瀏覽器頁面下拉後能夠看到一個『該網頁由 xxxx 提供』，由於頁面會提供給第三方使用，所以有一個需求是隱藏該網址。javascript

由於頁面都是已經存在的，而且有不少個頁面，所以想要的解決方案是一個通用的解決方案（至少也得90%頁面通用），不去修改具體每一個頁面的代碼。css

時間：2019-09-11 16:43:48html

忽然想了下，以爲須要一個線上 DEMO，這樣後面在看到這個問題，能夠找到這個文章的解決方案是否能真的解決這個問題。前端

線上DEMO 地址，點下面鏈接。（若是打不開，多是由於使用 github pages 部署，被微信瀏覽器給屏蔽了）java

zhongxia245.github.io/demo/pages/…react

完整案例源碼：點這裏 Githubios

零、補充一點

時間：2019-09-11 22:50:10
根據 @True不想說話同窗的方法，親測有效，簡單粗暴。git

可使用 CSS 來實現這個需求github

body:before {
  width: 100%;
  height: 100%;
  content: ' ';
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  background: #fff;
}
複製代碼

線上案例web

Iphone7 IOS12 微信瀏覽器下，親測有效，其餘設備沒有測試過

1、思路

解決這個問題，直接 google 一頓搜索，得出下面的結論。

1.一、看微信開發者文檔

首先須要查一下微信開發者的文檔，看下是JS SDK 有方法能夠用來控制這個網址的顯示隱藏，遺憾的是，並無提供這類方法。

1.二、禁止 touchmove 滾動

既然『該網頁由 xxxx 提供』是頁面已經滑到頂部了繼續下拉纔出現的，那麼禁止頁面下拉不就能夠解決問題了嘛，小菜一碟。

// 禁止頁面滾動
document.body.addEventListener('touchmove', function(e) {
    e.preventDefault()
  }, false)
複製代碼

too young too simple , addEventListener 方法的第三個參數有兼容性問題。

function preventDefault(e) {
    e.preventDefault();
}

// Chrome 5一、Firefox 49及以上
// 禁用觸摸滾動頁面
document.addEventListener('touchmove', preventDefault, {passive: false});
// 恢復觸摸滾動頁面
document.removeEventListener('touchmove', preventDefault, {passive: false});


// Chrome 5一、 Firefox 49如下
document.addEventListener('touchmove', preventDefault, false);
document.removeEventListener('touchmove', preventDefault, false);
複製代碼

如今這個時間點，chrome 78 已經出來了，所以禁止頁面滾動就成了這樣。

// 禁止頁面滾動
document.body.addEventListener('touchmove', function(e) {
    e.preventDefault()
  }, {passive: false})
複製代碼

這個時候，你會發現，頁面的確不能下拉，那麼『該網頁由 xxxx 提供』不就看不到了嗎，完美。

1.三、body 不滾動，單須要讓 div 容器內部滾動

不過改出新問題了，頁面不能滾動了，超過一屏的頁面，只能看一半，這誰能忍。所以還須要解決禁止 touchmove 後，頁面滾動的問題。

解決這個問題能夠用下面代碼，指定的 DIV 容器能夠內部滾動，這裏就讓 react 組件渲染的 DOM 節點去支持滾動爲例。

let overscroll = function(el) {
  el.addEventListener('touchstart', function() {
    let top = el.scrollTop
    let totalScroll = el.scrollHeight
    let currentScroll = top + el.offsetHeight
    //If we're at the top or the bottom of the containers
    //scroll, push up or down one pixel.
    //
    //this prevents the scroll from "passing through" to
    //the body.
    if (top === 0) {
      el.scrollTop = 1
    } else if (currentScroll === totalScroll) {
      el.scrollTop = top - 1
    }
  })
  el.addEventListener('touchmove', function(evt) {
    //if the content is actually scrollable, i.e. the content is long enough
    //that scrolling can occur
    if (el.offsetHeight < el.scrollHeight) evt._isScroller = true
  })
}
overscroll(document.querySelector('#app'))
document.body.addEventListener(
  'touchmove',
  function(evt) {
    console.log(evt._isScroller)
    //In this case, the default behavior is scrolling the body, which
    //would result in an overflow. Since we don't want that, we preventDefault.
    if (!evt._isScroller) {
      evt.preventDefault()
    }
  },
  { passive: false }
)
複製代碼

只有這個 js 仍是有問題的，須要設置一下 #app 的高度，而且超出長度則滾動。

由於div 容器內的滾動效果不太好，沒有彈性滾動，就是手指中止滑動，頁面就中止滑動了。由於增長了 -webkit-overflow-scrolling: touch; 來加一個彈性滾動效果。

這裏在Iphone7 IOS12 下，和一加7 （應該是這個型號）感受沒有什麼問題，體驗還能夠。可是網上看，使用這個屬性會引起 BUG。

#app {
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
複製代碼

1.四、注意 -webkit-overflow-scrolling: touch 的 Bug

解決這些問題，能夠參考這個文章，文章寫的仍是比較詳細了的，給做者點個贊。《深刻研究-webkit-overflow-scrolling:touch及ios滾動》。

Bug 的表現就是：偶爾卡住或不能滑動。

Iphone7， IOS12 下，一直沒有復現出來，不知道是否是特定的手機和系統版本纔會有這個問題。

解決方案：就是在webkit-overflow-scrolling:touch屬性的下一層子元素上，將height加1%或1px。從而主動觸發scrollbar。

main:after {
    min-height: calc(100% + 1px)
}
複製代碼

固然偶爾卡住了只是其中一個問題，除此以外，這個屬性還有不少bug，包括且不限於如下幾種：

一、滾動中 scrollTop 屬性不會變化

二、手勢可穿過其餘元素觸發元素滾動

三、滾動時暫停其餘 transition

【引用文章做者的原話】

因此目前來看，若是不想那麼費心，直接上iScroll或者better-scroll吧，我以爲 better-scroll 仍是挺好用的。若是你喜歡偷懶，那麼接着用-webkit-overflow-scrolling:touch也沒什麼問題。

畢竟移動端的水太深了，你永遠不知道下一個問題是發生在safari仍是x5內核瀏覽器上。