微信露底问题

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

然后就开始解决吧。

原理

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

代码

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

// scroll_fix.jslet 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

总结

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