屏蔽微信下拉出黑底现象

由于公司接触微信页面较多，

所以一度被微信下拉出黑的这种情况生无可恋，

所以花了较长时间去实践了各种方法（一脸懵逼.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');

　　

 

转载于:https://www.cnblogs.com/foreverZ/p/5867853.html