ios端阻止页面滚动露底

转自 http://www.eboy.me/archives/129；

在IOS端的微信中使用H5页面，页面滑动到底部时，再向上拉或页面在顶部时下拉，总会露出微信自带的底色；总是会让人不爽。

以下是一个相对完美的解决办法；原来是先禁止body的滚动事件，再允许内部div滚动；

一、设置body的css

body{height:100%;overflow: hidden;}

二、禁止body；

document.body.ontouchmove = function (e) {
      e.preventDefault();
};

 

三、然后取得触摸点的坐标；

var startX = 0, startY = 0;
    //touchstart事件  
    function touchSatrtFunc(evt) {
        try
        {
            //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  

            var touch = evt.touches[0]; //获取第一个触点  
            var x = Number(touch.pageX); //页面触点X坐标  
            var y = Number(touch.pageY); //页面触点Y坐标  
            //记录触点初始位置  
            startX = x;
            startY = y;

        } catch (e) {
            alert('touchSatrtFunc：' + e.message);
        }
    }
    document.addEventListener('touchstart', touchSatrtFunc, false);

四、允许div滚动；

var _ss = document.getElementById("div的id");
    _ss.ontouchmove = function (ev) {
        var _point = ev.touches[0],
                _top = _ss.scrollTop;
        // 什么时候到底部
        var _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();
        }
    };

如果在使用 vue+webpack 开发模式的话；直接将以上js代码放在 mounted（）函数里面就行了；