微信露底问题

Posted 2022-10-10 oasis-cuke

微信露底问题

最近在开发一个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

总结

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