移动端网页滑动到底部触发事件

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>   
<html lang="en">   
<head>   
    <meta charset="UTF-8">   
    <title>移动端网页滑动到底部触发事件</title
    <style type="text/css"> 
        .m-test {height: 2000px;background: green;}
    </style>  
</head>   
<body>
<div id="m-test" class="m-test"></div>
  
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
var flag=1;
var rgb = 0;
$(window).bind("scroll", function () {
    if(getScrollHeight() < getDocumentTop() + getWindowHeight() + 200){
        //当滚动条到底时,这里是触发内容
        //异步请求数据,局部刷新dom
        //ajax_function()
        if (flag == 1) {
            flag=0;
            var temp = `<div style="height:500px; background:rgb(100,${rgb},${rgb});"></div>`;
            $('body').append(temp);
            rgb = rgb + 20;
            flag = 1;
        }
    }
});
  
//文档高度
function getDocumentTop() {
    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;
    console.log("scrollTop:"+scrollTop);
    return scrollTop;
}
  
//可视窗口高度
function getWindowHeight() {
    var windowHeight = 0;
    if (document.compatMode == "CSS1Compat") {
        windowHeight = document.documentElement.clientHeight;
    } else {
        windowHeight = document.body.clientHeight;
    }
    console.log("windowHeight:"+windowHeight);
    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;
    console.log("scrollHeight:"+scrollHeight);
    return scrollHeight;
}
</script>
</body>   
</html

 


posted @   徐同保  阅读(496)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示