window-到底刷新操作

作者: Arno_z | 来源:发表于2017-08-05 20:40 被阅读0次

window-到底刷新操作
产品设计之刷新
iOS UITableView中刷新和编辑操作
如何刷新信息？
iOS 主线程，执行UI刷新
ReactNative mark
心香午语190706
Flutter(九)--Flutter中Widget刷新逻辑+源
12306网站启用图形验证码-数据分析搞笑片
js返回刷新、不刷新

经常看到有的网站在拉到最底下的时候会刷新内容，那么这个是怎么实现的呢？
其实就是针对特定的内容区域做了一个scroll事件处理，下面的例子是在window上添加了一个scroll事件。
判断是否到底的操作是判断当前拖动的距离和当前视区的高度之和是否达到总的文档高度，达到即进行对应的操作

<!DOCTYPE html>
<html>
<head>
    <title>Scroll</title>
    <style type="text/css">
    </style>
</head>
<body>
    <h1>滚动测试</h1>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <p>xxx</p>
    <script type="text/javascript">
        window.onscroll = function sFunc(){
            var topHeight = document.documentElement.scrollTop||document.body.scrollTop;
            var totalHeight = document.body.clientHeight;
            var viewHeight = window.innerHeight;
            if(topHeight + viewHeight >= totalHeight){
                var pNode = document.createElement("p");
                    var textNode = document.createTextNode(new Date() + "请求新数据");
                    pNode.appendChild(textNode);
                    document.body.appendChild(pNode);
            }
        }
    </script>
</body>
</html>

对于window添加了onscroll事件，然后每次scroll的时候，由：
document.documentElement.scrollTop||document.body.scrollTop获取当前位置距离顶部的距离
document.body.clientHeight获取文档的总高度
window.innerHeight获取视区高度
（上面的选择是在chrome下测试的，关于获取不同的宽高度的操作可能对于不同浏览器有不同的API）
然后你往下拉的时候就可以看到对应的输出。