javascript - 移动浏览器中内容的高度超过视口时，没有设置overflow-y:scroll ,当窗口移动时时如何监听视口到了内容底部

Question

1 主要是为了无限加载
2 设置overflow-y:scroll的滚动条奇丑无比

Answer 1

首先给出3个函数：

        function getScrollTop() {
            //滚动条在Y轴上的滚动距离
            var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
            if (document.body) {
                bodyScrollTop = document.body.scrollTop;
            }
            if (document.documentElement) {
                documentScrollTop = document.documentElement.scrollTop;
            }
            scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
            return scrollTop;
        }

        //浏览器视口的高度
        function getWindowHeight() {
            var windowHeight = 0;
            if (document.compatMode == "CSS1Compat") {
                windowHeight = document.documentElement.clientHeight;
            } else {
                windowHeight = document.body.clientHeight;
            }
            return windowHeight;
        }

        //文档的总高度
        function getScrollHeight() {
            var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
            if (document.body) {
                bodyScrollHeight = document.body.scrollHeight;
            }
            if (document.documentElement) {
                documentScrollHeight = document.documentElement.scrollHeight;
            }
            scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
            return scrollHeight;
        }
        

然后监听滚动事件：

$$(window).on("scroll", function(){
    //函数内判断，距离底部50px的时候则进行数据加载
    if (getScrollTop() + getWindowHeight() + 50 >= getScrollHeight()) {
        //Ajax异步加载新数据
    }
});

---------更新
关于滚动条丑的问题，如果是ios可以不用管了，如果是安卓，可以考虑使用第三方滚动条框架iscroll,github或者百度搜索即可找到