防止网页在微信中下拉露黑底方案调研

[sixwinds]

防止网页在微信中下拉露黑底方案调研

问题

如果用微信打开网页，如果我们在网页第一屏继续下拉的情况下，顶部 webview 上部会有一块黑底显示出来，类似于原生 App 的下拉更新的样子。现在我们希望禁止这个行为。

分析

通过谷歌大法发现，这个行为应该是 touchmove 事件的默认行为。要禁止这个黑底出现，只要监听 touchmove 事件，在其中 preventDefault() 即可。但是如果简单的禁止了 touchmove 事件的默认行为，那么网页本身就无法进行上下滚动。那么我们是不是可以检测当前网页是否已经滚动到最上部，如果滚动到了最上面（无法继续下拉）那么我们再禁止 touchmove 的默认行为。

解决方案

我们假设页面有一个容器 div#wrapper，它负责整个页面的滚动。为什么不用 body，因为谷歌大法告诉我，有的版本的浏览器会不让 js 去禁止 body touchmove 的默认行为。所以我们大致的代码如下：

var wrapper = document.getElementById( 'wrapper' );
var touchstartY;

wrapper.addEventListener( 'touchstart', function (ev) {
    var events = ev.touches[ 0 ] || ev;
    touchstartY = events.clientY;
}, false );

wrapper.addEventListener( 'touchmove', function (ev) {
    var events = ev.touches[ 0 ] || ev;
    // 下拉时并且页面已经到顶部时
    if ( events.clientY > touchstartY && (wrapper.scrollTop === 0) ) {
      ev.preventDefault();
    }
}, false );

我在 ios10 上测试成功，但是在荣耀8 的 EMUI5（Android7）系统上则有一种情况还是会出现黑底，就是当页面位置在即将到顶部但是还有一段距离，用户开始下拉，那么当页面滚到顶部时用户不放手继续下拉，则依然会出现黑底。我原先以为是 touchmove 触发的频率过低所致，所以我故意慢一点拉然后记录各个变量的值，我发现在 touchmove 时即使events.clientY >= touchstartY && (wrapper.scrollTop === 0) 这个条件为true了，我停顿一下手指再继续往下拉（停顿时候手指不离开屏幕）依然会出现黑底，意味着这种情况下 preventDefault() 没能阻止黑底的出现。那我此时基本可以认为这是微信 webview 在 android 上的一个 bug。

然后我找了另一种方案来禁止滚动就是当wrapper.scrollTop === 0时候，给 wrapper 添加 touch-action: none;的样式，依然不能解决这个问题。所以经过一天的调研，暂时只能在水果机的微信上实现这个功能。

最后水果机微信的 webview 在页面滚动到最底部继续上拉的情况也会出现黑底，那么我们在多加一个判断，最终的代码初稿如下：

var wrapper = document.getElementById( 'wrapper' );
var touchstartY;

wrapper.addEventListener( 'touchstart', function (ev) {
    var events = ev.touches[ 0 ] || ev;
    touchstartY = events.clientY;
}, false );

wrapper.addEventListener( 'touchmove', function (ev) {
    var events = ev.touches[ 0 ] || ev;
    var scrollTop = wrapper.scrollTop,
		var	offsetHeight = wrapper.offsetHeight,
		var	scrollHeight = wrapper.scrollHeight;
    if ( events.clientY > touchstartY && (wrapper.scrollTop === 0) ) {
    // 下拉时并且页面已经到顶部时
      ev.preventDefault();
    } else if ( events.clientY < touchstartY && (scrollTop + offsetHeight >= scrollHeight) ) {
    // 上拉时并且页面已经到底部时
      ev.preventDefault();
    }
}, false );

后记

我初次接触移动端，以上是我个人的调研结果，不排除有成熟的原生解决方案（当然如果用 IScroll 模拟滚动是可以解决这个问题的）。如果有有经验的同志，希望不惜赐教。