解決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