scrollingElement：在微信内置浏览器中的坑

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/rencaishigepi/article/details/86227502

最近在做页面保存状态时，由详情页跳转回列表页，恢复状态时，有很明显的等待时间。当初以为是恢复数据时，由于又去请求的数据造成的，结果是一个由“加载更多”的功能带来的坑。

“加载更多”的实现效果为：当页面滑动时，元素视口高度+元素滚动高度+70（只是为了多一部分空间）>=元素滚动高度时，就加载下一页的数据。

在PC端一切表现的那么完美，后面测试手机自带浏览器也很快，就唯独在微信内置浏览器中打开有很明显的等待时间。

在微信开发者工具中，检测到这样一个问题，就是只要一滑动，数据就去请求下一页。如果数据分了20页，那我滑动20下，等跳转回列表页时，我需要去循环请求20页的数据，然后再恢复页面位置。这样，势必恢复状态很慢。

最后查到了是由于scrollingElement获取错误的原因，看以下代码：

window.addEventListener('scroll', function(event) {
    var eleScrolling;
    if (eleScrolling = event.target.scrollingElement) {
        if (scope.toggleSpy) {
            if (scope.onbottom && angular.isFunction(scope.onbottom)) {
                if (eleScrolling.clientHeight + eleScrolling.scrollTop + parseInt(scope.offset) >= eleScrolling.scrollHeight) {
                    scope.$apply(function() {
                        scope.toggleSpy = false;
                        scope.onbottom();
                    });
                }
            }
        }
    }
});

scrollingElement：在标准模式下, 这是文档的根元素, document.documentElement；在怪异模式下，是获取的body或者null。

所以，在微信内置浏览器中，调试发现，获取的真的是body。

在我的代码中，body的client就是它的scrollHeight，因此只要一滚动，高度总是大于的，就总会去请求下一页，直到请求完数据。

记录一下这个坑，防止以后踩踏。