微信浏览器禁止页面下拉查看网址

正常状况下，微信浏览器页面下拉后能够看到一个 『该网页由 xxxx 提供』，由于页面会提供给第三方使用，所以有一个需求是隐藏该网址。

由于页面都是已经存在的，而且有不少个页面，所以想要的解决方案是一个通用的解决方案（至少也得90%页面通用），不去修改具体每一个页面的代码。

时间：2019-09-11 16:43:48

忽然想了下，以为须要 一个线上 DEMO，这样后面在看到这个问题，能够找到这个文章的解决方案是否能真的解决这个问题。

线上DEMO 地址，点下面链接。（若是打不开，多是由于使用 github pages 部署，被微信浏览器给屏蔽了）

zhongxia245.github.io/demo/pages/…

完整案例源码：点这里 Github

零、补充一点

时间：2019-09-11 22:50:10
根据 @True不想说话 同窗的方法，亲测有效，简单粗暴。

可使用 CSS 来实现这个需求

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

线上案例

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内核浏览器上。

2、总结一下

PC Web 的时候，开发最苦逼的是 IE 兼容性，如今 Mobile Web 开发，最苦逼的各个手机的兼容性问题。兼容性是前端开发避不开的深坑呀。

解决一个问题，又引起了更多的问题出来，生生不息，无穷尽也。

没有代码就没有 BUG。

这篇文章的内容，就大概下面这些了。

1. 要解决下拉显示『该网页由 xxxx 提供』
2. 使用禁止 touchmove 方案
3. 指定特定 DIV 元素不由止 touchmove 滚动，让页面能够滚动
4. div 内部滚动增长弹性滚动
5. 了解下弹性滚动可能引起的 bug

终、参考文章

一、《微信浏览器禁止页面下拉查看网址（不影响页面内部scroll）》

二、《深刻研究-webkit-overflow-scrolling:touch及ios滚动》

三、《[移动端新特性] Passive Event Listeners》

四、《passive 的事件监听器》

五、《移动端禁用及恢复触摸页面滚动》