在浏览器中要实现原生的滑动效果以前需要借助第三方的iscroll库来实现，现在我们有了

-webkit-overflow-scrolling: touch;

可以让我们的webApp像原生应用一样流畅的滑动了，但是在IOS 的safari下会出现讨厌的(scroll bounce)“橡皮筋”效果，我们不希望在整个document上出现这种情况，尤其是你有固定的header和footer的情况下。

下面来看如何解决

在移动端我一直喜欢这种结构的html，不用固定定位，绝对定位的#page来代替body，header，.body，.footer分别绝对定位

scss代码如下

#page{
       position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;}.header{
       position: absolute;    top: 0;    left: 0;    right: 0;    @include px2rem(height, $h-header);    background-color: #f2f2f0;}.footer{
       position: absolute;    bottom: 0;    left: 0;    right: 0;    @include px2rem(height, $h-footer);    background-color: #76c7c0;}.body{
       position: absolute;    @include px2rem(top, $h-header);    @include px2rem(bottom, $h-footer);    left: 0;    right: 0;    overflow-y: auto;    -webkit-overflow-scrolling: touch;}

现在来点JS

document.addEventListener('DOMContentLoaded', ready, false);document.addEventListener('touchmove', function (ev){    ev.preventDefault();}, false); function ready(){    document.querySelector('.body').addEventListener('touchmove', function (ev){        ev.stopPropagation();    }, false);}

原理很简单阻止全局的touchmove默认行为，对滚动区域的touchmove阻止冒泡就可以了

 

参考链接