一、遇到的问题

移动端开发中，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();页面不能滚动是一个道理了。