H5在IOS微信浏览器上滑会出现空白回弹的问题

昨天第一次写H5，就遇到了一个大麻烦，写好的页面在IOS微信浏览器上面上滑时底部居然会出现浏览器空白，但松手时空白就会回弹，网上找了很多种方法，但是却没有效果，网上的方法大都是禁止浏览器滑动，然后给需要的地方加上滑动，但是我用着没有效果。无奈只能靠自己了，在对页面多次鼓捣之下。我发现一个问题，触发拉起底部空白并不是每次都会触发的：当我们第一次进入页面时从头开始滑动到底部时一般不会拉起底部空白，当我们松手时，在当前最底部位置继续往上滑时会拉起底部空白，而当我在底部上滑时先往下拉一点再往上拉时不会出现底部浏览器空白，所以得出一个结论：

当我们将页面内容滑动到最底部时，松手再往上滑，由于页面内容已经是最底部了，无法继续上滑，所以会调用浏览器的滑动，就会出现底部空白，但是如果我们没有将内容滑到底部，这时松手再往上滑动不会拉起浏览器空白

根据这种情况，虽然我没办法禁止浏览器的滑动，那我就改变策略，不禁止浏览的上滑，根据结论可以知道，只要我们保证停止滑动时页面内容不会停在最底部就可以了，那怎么保证不会拉到最底部，我的思路是：监听页面的滚动，当我们停止滑动时，如果内容已经滑动最底部，那么松手时就将页面内容回滚一点，保证页面内容不会停留在最底部即可。最后上代码

<script>
    var topValue = 0,// 上次滚动条到顶部的距离
        interval = null;// 定时器
    Scrolls = document.getElementById("div");
    Scrolls.onscroll = function() {  //项目需要滚动div
        if(interval == null) {// 未发起时，启动定时器，1秒1执行
            interval = setInterval(function () {
                test();
            }, 500);//计时器，用于记录滑动的距离，滑动界面时，每隔一段时间就记录滑动的位置该事件越小越准
        }
        topValue = Scrolls.scrollTop;//记录当前滑动的位置

    }

    function test() {
        //记录的滑动距离与现在滑动距离相等时，表示停止滚动
        if(Scrolls.scrollTop == topValue) {
            // console.log("ok");
            //页面停止滚动，判断当前页面是否停止在最底部
            //Scrolls.scrollHeight  滚动的总高度 Scrolls.clientHeight 视口大小 Scrolls.scrollTop 滚动的距离
            //滚动的距离约等于总高度-视口大小，为什么约等于，拿我的来说 我的Scrolls.scrollHeight是1369
            //Scrolls.clientHeight是640
            //Scrolls.scrollTop是701.5999755859375
            //1369 - 640 = 720，scrollTop需要先取整时才会等于720，所以scrollTop需要使用Math.ceil,当然后面我试了几部不同规格的手机都是没问题的
            if (Scrolls.scrollHeight-Scrolls.clientHeight == Math.ceil(Scrolls.scrollTop) ){
                //下面是时内容回滚一点，10随便取，但是太大的话效果会显得很奇怪，随意取小一点就行，保证内容不是最底部即可
                Scrolls.scrollTop = Scrolls.scrollTop-10;
            }
            clearInterval(interval);
            interval = null;
        }
    }

</script>

虽然这个方法还是不完美，而且治标不治本，但也算是一个解决方案，其他方法如果不行的话试一下