不完全解決ios瀏覽器頁面滾動到底部或頂部後導致頁面區域性滑動失效的問題

npm外掛ios-scroll-supply

1.首先給需要滑動的元素加一個touchmove事件，事件觸發的時候給event設定一個屬性isSCROLL為true；

2.然後給body加touchmove事件，觸發事件時判斷event的isSCROLL屬性是否為true，否的話就禁止預設事件

3.是的話代表點選的事件源為需要滑動的元素，判斷其滑動的最高點和最低點加一個限制就ok了，類似碰壁反彈（手動改變scrollTop會導致頁面有閃動現象）

    function handleScroll () {
        var ios = navigator.userAgent.indexOf('iPhone'); 
        // 判斷是否為ios
        if (ios !== -1) {
            // ios下執行
            var divEl = document.querySelector('.home-container-con'); 
            // 你需要滑動的dom元素
            iosTrouchFn(divEl);
        }

        function iosTrouchFn(el) {
            // el需要滑動的元素
            el.addEventListener('touchmove', function (e) {
                if (el.offsetHeight < el.scrollHeight) {
                   e.isSCROLL = true;
                }
            });
            document.body.addEventListener('touchmove', function (e) {
                if (!e.isSCROLL) {
                    e.preventDefault(); // 阻止預設事件(上下滑動)
                }
                else {
                    // 需要滑動的區域
                    var top = el.scrollTop; 
                    // 物件最頂端和視窗最頂端之間的距離
                    var scrollH = el.scrollHeight; 
                    // 含滾動內容的元素大小
                    var offsetH = el.offsetHeight; //元素網頁可見區域高
                    var cScroll = top + offsetH; // 當前滾動的距離
                    // 被滑動到最上方和最下方的時候
                    if (top === 0) {// 滑動到了頂部
                        top = 1; // 0～1之間的小數會被當成0
                    }
                    else if (cScroll === scrollH) {
                        // 滑動到了底部
                        el.scrollTop = top - 1;
                    }
                }
            }, {
                passive: false
            }); // passive防止阻止預設事件不生效
        }
    }
    
複製程式碼

參考連結1 參考連結2

問題圖例：