微信露底问题
微信露底问题
最近在开发一个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
总结
虽然暂时解决了问题,但是并不是很优雅,后续再慢慢优化吧。