禁止ios浏览器页面上下滚动 (橡皮筋效果)

在ios任何版本的浏览器（包括ios微信内置的浏览器），滚动页面的时候会出现整个页面上下滚动的效果（百度说是橡皮筋效果），虽然不耽误使用，但是让人心烦，所以要禁止掉这个行为。

有两种方法可以解决这个问题：（推荐使用第二种方法）

1.用fixed定位来解决

解决思路：这个就是把html,body设置width: 100%; height: 100%; position: fixed;top:0;left:0;

注意问题：测试在微信内生效，嵌入到webview中失效，其他还没测，测好了在更。

2.阻止body的touchmove事件                                                                                                                                                               

但是事件是冒泡的，阻止了body的touchmove事件，如果其他有元素需要滑动该怎么办呢？

解决思路：1.首先给需要滑动的元素加一个touchmove事件，事件触发的时候给event设置一个属性isSCROLL为true；

                  2.然后给body加touchmove事件，触发事件时判断event的isSCROLL属性是否为true，否的话就禁止默认事件

                  3.是的话代表点击的事件源为需要滑动的元素，判断其滑动的最高点和最低点加一个限制就ok了，类似碰壁反弹

var ios = navigator.userAgent.indexOf('iphone');//判断是否为ios

if(ios == -1){  
    //ios下运行
    var divEl = ....//你需要滑动的dom元素
    iosTrouchFn(divEl);
}

function iosTrouchFn(el) {
    //el需要滑动的元素
    el.addEventListener('touchmove',function(e){
        e.isSCROLL = true;
    })
    document.body.addEventListener('touchmove',function(e){
        if(!e.isSCROLL){
            e.preventDefault(); //阻止默认事件(上下滑动)
        }else{
            //需要滑动的区域
            var top = el.scrollTop; //对象最顶端和窗口最顶端之间的距离 
            var scrollH = el.scrollHeight; //含滚动内容的元素大小
            var offsetH = el.offsetHeight; //网页可见区域高
            var cScroll = top + offsetH; //当前滚动的距离

            //被滑动到最上方和最下方的时候
            if(top == 0){
                top = 1; //0～1之间的小数会被当成0
            }else if(cScroll === scrollH){
                  el.scrollTop = top - 0.1;
            }
        }
    }, {passive: false}) //passive防止阻止默认事件不生效
}

最后写一点 passive 是addEventListener最后改版的参数，如果想了解的话给大家推个链接

https://www.cnblogs.com/ziyunfei/p/5545439.html