h5禁止ios上拉回彈_通過js解決safari、微信下拉回彈和上拉空白的效果

在ios中為了讓滑動更流暢，不那么生澀，我們需要使用-webkit-overflow-scrolling屬性，如下：

-webkit-overflow-scrolling : touch;

　　

其工作原理是：在有這個屬性的容器上，系統會創建了一個uiscrollview，應用於該元素並將之作為渲染對象，從而為我們實現體驗流暢的觸屏滑動。在ios上的表現結果令人十分滿意，並且網頁滑動和區域滑動的沖突同樣解決的很好。

 

但是在safari、微信等瀏覽器中會出現下拉回彈和上拉空白的效果。解決辦法為：當滾動區滾到頂部時，手再觸屏時，把把div的滾動位置向下調一點點，這樣系統就會以為還沒有滾到頭，就會繼續滑動。

Pexelshttps://www.wode007.com/sites/73241.html 天堂圖片網https://www.wode007.com/sites/73243.html

代碼如下：

var overscroll = function(el) {
    el.addEventListener('touchstart', function() {
        var top = el.scrollTop
        ,totalScroll = el.scrollHeight
        ,currentScroll = top + el.offsetHeight;
        if(top === 0) {
            el.scrollTop = 1;
        }else if(currentScroll === totalScroll) {
            el.scrollTop = top - 1;
        }
    });
 
    el.addEventListener('touchmove', function(evt) {
    if(el.offsetHeight < el.scrollHeight)
        evt._isScroller = true;
    });
}
        
overscroll(document.querySelector('.scroll'));
document.body.addEventListener('touchmove', function(evt) {
    if(!evt._isScroller) {
        evt.preventDefault();
    }
});