解决IOS safari下滑动的“橡皮筋”效果

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

-webkit-overflow-scrolling: touch;

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

下面来看如何解决

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

<div id="page">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
</div>

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阻止冒泡就可以了

参考链接

Optimizing “overflow:scroll” on iOS5

解决IOS safari下滑动的“橡皮筋”效果

推荐阅读