不完全解决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

问题图例：