ios上拉下划出现黑色背景的解决办法

移动端页面位于最顶部时下划，上方总会出现黑色的背景，而
ios中，页面划动到底部时继续上划同样会出现黑色背景，不过这其实并不是什么大问题。

但我们在开发过程中发现，页面往上滑动速度稍快一点，即使页面还没到底，下方黑色背景也会偶尔出现，影响到了正常的滑动体验，所以我们想出了一个解决办法。

function moveAdjustment(domId){

    document.documentElement.ontouchmove=function(e){
            e.preventDefault();
    };

    var wrap=document.getElementById(domId);

    wrap.addEventListener('touchstart',function(e){

            var startPoint=e.touches[0].clientY;

            wrap.ontouchmove=function(e){

                var movePoint=e.touches[0].clientY;

                var nowScroll=wrap.scrollTop;

                var wholeScroll=wrap.scrollHeight-wrap.clientHeight;

                if(nowScroll==0){

                    if(startPoint<movePoint){

                        e.preventDefault();

                    }else{

                        e.stopPropagation();

                    };

                }else if(nowScroll==wholeScroll){

                    if(startPoint>movePoint){

                        e.preventDefault();

                    }else{

                        e.stopPropagation();

                    }

                }else if(nowScroll>0 && nowScroll<wholeScroll){

                    e.stopPropagation();

                }else{

                    e.preventDefault();

                };

            };

    },false);
};

moveAdjustment('wrap');

这种方法的主要原理就是在三种不同状态（页面位于顶部、页面拉到底部以及除这两种状态以外的状态）下比较触摸点在垂直方向的偏移值大小来禁用和解放页面的滑动功能。

不过也因此，使得这种方法并不完美：首先，在没有滚动条出现的情况下是没有效果的；其次，从底部滑动回到顶部的时候也是没有效果的。

但目的我们是达到了，设置了之后，在页面滑动到底部之前都不会出现下方的黑色背景而影响体验。

最后需要注意一下，使用这种方法时需要配合一点css样式：

.wrap{
    overflow:auto;
    max-height:100vh;
    -webkit-overflow-scrolling:touch;
}

最后的最后，希望大家能不吝赐教，指出问题或提出优化方法。