微信露底问题

微信露底问题

最近在开发一个IM的项目，但有一个问题就是客户端会在微信浏览器里面“露底”。真的是让人非常恼火，如图

然后就开始解决吧。

原理

其实就是对页面滚动进行控制。禁止了全局滚动，开放了局部滚动。虽然说有一些不友好，但总归有用

代码

因为用的是vue所以自然就是es6啦,并且直接制作一个自定义指令（directives）。至于如何创建自定义指令这里就不详细说明了，可以查看官方文档。

// scroll_fix.js
let scroll_fix = {
  inserted(el) {
    document.body.ontouchmove = (event) => {
        // 这里判断默认事件是否可以阻止
        if (event.cancelable && !event.defaultPrevent) {
            event.PreventDefault();
        }else {
        // 错误处理。。。
        }
    };
    
    let startX = 0,
      startY = 0;
    //touchstart事件
    function touchSatrtFunc(evt) {
      try {
        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
        let touch = evt.touches[0]; //获取第一个触点
        let x = Number(touch.pageX); //页面触点X坐标
        let y = Number(touch.pageY); //页面触点Y坐标
        //记录触点初始位置
        startX = x;
        startY = y;
      } catch (e) {
        console.error("touchSatrtFunc：" + e.message);
      }
    }
    document.addEventListener("touchstart", touchSatrtFunc, false);
    let _ss = el;
    _ss.ontouchmove = function(ev) {
      console.log("ontouch");
      let _point = ev.touches[0],
        _top = _ss.scrollTop;
      // 什么时候到底部
      let _bottomFaVal = _ss.scrollHeight - _ss.offsetHeight;
      // 到达顶端
      if (_top === 0) {
        // 阻止向下滑动
        if (_point.clientY > startY) {
          ev.preventDefault();
        } else {
          // 阻止冒泡
          // 正常执行
          ev.stopPropagation();
        }
      } else if (_top === _bottomFaVal) {
        // 到达底部
        // 阻止向上滑动
        if (_point.clientY < startY) {
          ev.preventDefault();
        } else {
          // 阻止冒泡
          // 正常执行
          ev.stopPropagation();
        }
      } else if (_top > 0 && _top < _bottomFaVal) {
        ev.stopPropagation();
      } else {
        ev.preventDefault();
      }
    };
  }
}

export default scroll_fix

总结

虽然暂时解决了问题，但是并不是很优雅，后续再慢慢优化吧。