屏蔽微信下拉出現黑底現象

最近做的項目遇到了一個需求，在ios上微信網頁下拉的時候不能出現黑底。如果要做的網頁本來就設計成不能滾動的效果的話，普遍流傳的方法是屏蔽掉 body 的 touchstart 或 touchmove 事件，但也會讓所有滾動不可用，只適用部分頁面。解決的方法很簡單：

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
});

這樣就可以禁止網頁的滾動。但是當遇到網頁內容超過窗口的100%的時候，禁止滾動就會導致用戶沒法滾動屏幕看到窗口以外的內容。因此這個辦法不可行啦！

如果遇到了需要部分滾動的頁面，在網上找到了以下辦法：

$(function(){
    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('body');
});

調用PreventScroll();函數即可。但是此方法在安卓上可行，在ios上如果手一直拖動網頁不放開，滾動條不消失的話，黑底還是會出現。。不知道大家有什麼更完善的方法呢？