移动端iOS阻止橡皮筋效果

一、遇到的问题

移动端开发中，iOS的微信浏览器也好、Safari也好在浏览网页的时候会出现橡皮筋效果。就是当页面拉到尽头的时候还能再继续拉动，露出浏览器的底色，松手会回弹回去。

微信浏览器：

Safari：



只有iOS有这个效果，android没有这个问题。

二、解决办法

首先想到event.preventDefault();但是如果直接添加到body上，整个页面就不会滚动了。机智的你立刻想到，只有到达临界值的时候在阻止事件默认行为不就行啦！是这样的，我们只需要判断，页面是否滚动到了顶端和底部即可。

var startY,endY;
//记录手指触摸的起点坐标
$('body').on('touchstart',function (e) {
     startY = e.touches[0].pageY;
});
$('body').on('touchmove',function (e) {
     endY = e.touches[0].pageY;  //记录手指触摸的移动中的坐标
     //手指下滑，页面到达顶端不能继续下滑
     if(endY>startY&& $(window).scrollTop()<=0){
         e.preventDefault();
     }
   //手指上滑，页面到达底部能继续上滑
     if(endY<startY&& $(window).scrollTop()+
         $(window).height()>=$('body')[0].scrollHeight){
         e.preventDefault();
     }
})

有同学可能会问，直接判断是否到达页面顶部或者底部阻止不行默认行为不就行了？还判断上滑下滑这么麻烦干什么？

这是因为，如果按照你的方案来，当你到达底部的时候，手指不论做什么方向的滑动都会被阻止默认行为，这个时候你往上滑也会被阻止的，所以页面又不能动了！！！这就和你直接在body上添加event.preventDefault();页面不能滚动是一个道理了。