由于公司接触微信页面较多,
所以一度被微信下拉出黑的这种情况生无可恋,
所以花了较长时间去实践了各种方法(一脸懵逼.jpg)
好吧,经过各种傻逼的方法尝试后,发觉竟然还是可以简单解决的,一脸憋屈...
普遍流传的方法是屏蔽掉 body 的 touchstart 或 touchmove 事件,但也会让所有滚动不可用,只适用部分页面
所以我就把重心放在了如何让滚动依旧可用上,乃至屏蔽所有的事件自写一个滚动容器(弹性拖动和避免卡顿要疯...)
而后来发现,直接屏蔽掉当 scrollTop 在顶部时的 touchmove 不就好了吗,真是走了好多弯路
function stopDrop(stillCanScroll) {
var lastY;
$("body").off().on('touchstart.stop', function(event) {
lastY = event.originalEvent.changedTouches[0].clientY;
}).on('touchmove.stop', function(event) {
var y = event.originalEvent.changedTouches[0].clientY;
var st = $(stillCanScroll).scrollTop();
// 向上滚动且滚动条位于顶部,屏蔽事件
if (y > lastY && st < 5) {
event.preventDefault();
return false;
}
lastY = y;
});
}
该怎么去评价这段代码吗,反正不高效就对了,
正在实践多个 stillCanScroll 的情况,但又实在害怕检测该元素 touchstart 而造成的事件混淆,
理论上确实能解决出黑底的问题,但依旧不能根除,而且还把下拉刷新刷新的功能搞没了。
就这样吧,这个问题解决办法的寻求将抗日持久....
----------------- 2017.04.20 补充
后来看了一个博主的代码后有些启发,所以现在使用下面这版
if (!HTMLElement.currentStyle) {
function _getStyle(prop) {
var _s = window.getComputedStyle(this, null)
return prop ? _s[prop] : _s;
}
HTMLElement.prototype.currentStyle = _getStyle;
HTMLElement.prototype.getStyle = _getStyle;
}
// 阻止微信下拉出黑底插件
function PreventScroll() {
// // 非微信浏览器直接跳出 -- 后来发现好些浏览器都有这个坑,所以去掉
// var ua = navigator.userAgent.toLowerCase();
// if (!ua.match(/MicroMessenger/i)) return;
var elem = arguments || []; // 传入绑定的元素
var $elem = []; // 存储所有需要监听的元素
// 获取需要监听的元素
for (var i=0,len=elem.length; i<len; i++) {
var $e = document.querySelectorAll(elem[i]);
if (!$e) {console.error('您输入的元素不对,请检查'); return;}
for(var j=0; j<$e.length; j++) {
if ($e[j].currentStyle('overflow').match(/auto|scroll/i)) {
$elem.push($e[j]);
}
}
}
window.addEventListener('touchstart', function(e){
window.scroll_start = e.touches[0].clientY;
});
window.addEventListener('touchmove', prevent);
function prevent(e) {
var status = '11'; // 1容许 0禁止,十位表示向上滑动,个位表示向下滑动
var startY = window.scroll_start;
var currentY = e.touches[0].clientY;
var direction = currentY - startY > 0 ? '10' : '01'; // 当前的滚动方向,10 表示向上滑动
$elem.forEach(function(ele){
var scrollTop = ele.scrollTop,
offsetHeight = ele.offsetHeight,
scrollHeight = ele.scrollHeight;
if (scrollTop === 0) {
// 到顶,禁止向下滑动,或高度不够,禁止滑动
status = offsetHeight >= scrollHeight ? '00' : '01';
} else if (scrollTop + offsetHeight >= scrollHeight) {
// 到底,则禁止向上滑动
status = '10';
}
});
// output.innerHTML = status + ' ' + ++count;
// 如果有滑动障碍,如到顶到底等
if (status != '11') {
if (!(parseInt(status, 2) & parseInt(direction, 2))) {
e.preventDefault();
return;
}
}
}
}
PreventScroll('.main', '.header', '.footer');