在iOS的微信,QQ,Safari等瀏覽器, 列表頂部下拉和底部上拉露出瀏覽器灰色背景。
針對此問題，在一些移動端頁面下拉、上拉過程導致瀏覽器底部露出背景。 在一定程度上會影響使用者的正常操作 以及 使用者體驗。

省下好多喝茶的片刻，以及找過網上類似的解決方法。 終於想到一套能夠很好解決此類問題的辦法！

需要解決此刻需求的朋友參考文章，提供給大家思路以及參考學習。

具體實現步驟以及思路，2步

1、定義需要滾動的區域容器，#scrollWrap， 注意設定高度百分比或者畫素值 和 overflow: auto;。 監聽#scrollWrap 滾動，其滾動條到達頂部（scrollTop = 0） 以及 滾動條到達底部（(scrollTop / (contentHeight - viewHeight)) == 1） 時 禁用移動端touchmove 事件

2、監聽容器touchstart 以及 touchmove事件。滾動條到達頂部，禁用下拉手勢的touchmove 事件。反之滾動條到達底部，禁用容器上拉手勢touchmove 事件。

以下提供例項參考使用。

1、構建內容主體。

<div id="scrollWrap">
    //主體內容，請隨意，別刻意。
</div>

2、設定容器主體 #scrollWrap 樣式。

html,body{
    margin: 0;
    height: 100%;
    width: 100%;
    -webkit-overflow-scrolling: touch
 
;
    -webkit-overflow-scrolling: touch;
}
#scrollWrap{
    /*注意必須是設定 容器的有效高度*/
    height: 100%;
    overflow: auto;
}

3、阻止移動端 touchmove 事件的具體JS處理邏輯。

//滾動條是否在頂部
var isScroll_top = true;
//滾動條是否在底部
var isScrill_bottom = false;
function restoreEvent(event) {
    switch(event.type){
        case "touchstart"
 
 :
            $startY = event.touches[0].clientY;
            break;
        case "touchmove" :
            $moveY = event.touches[0].clientY;
            //滑動距離
            touchesY = $startY - $moveY;
            //滾動條頂部
            if(isScroll_top) {
                if(touchesY < 0) {
                    event.preventDefault();
                }else{
                    var scrollWrap = document.getElementById("scrollWrap");
                    if(scrollWrap.scrollHeight == scrollWrap.clientHeight) {
                        event.preventDefault();
                    }else {
                        event.stopPropagation();
                    }
                }
            //滾動條底部
            }else if(isScrill_bottom){
                if(touchesY > 0) {
                    event.preventDefault();
                }else{
                    event.stopPropagation();
                }
            }
            break;
        case "touchend" :
            break;
    }
}

/*監聽容器的 touch 觸發事件處理邏輯*/
document.getElementById("scrollWrap").addEventListener("touchstart",restoreEvent);
document.getElementById("scrollWrap").addEventListener("touchmove",restoreEvent);
document.getElementById("scrollWrap").addEventListener("touchend",restoreEvent);

/*監聽容器 scroll 滾動事件處理邏輯*/
document.getElementById("scrollWrap").addEventListener("scroll",function() {
    var tabView = document.getElementById("scrollWrap");
    var contentHeight = tabView.scrollHeight, //內容高度
    scrollTop = tabView.scrollTop; //滾動高度
    viewHeight = tabView.clientHeight;

    if(scrollTop == 0) {
        isScroll_top = true;
    }else{
        isScroll_top = false;
    }
    if ((scrollTop / (contentHeight - viewHeight)) == 1 ) {
        isScrill_bottom = true;
    }else {
        isScrill_bottom = false;
    }
});

到此就結束了。如在哪裡地方有些不適，歡迎留言提出建議、指點。 或者加入Q群 595377655學習討論。