判断页面是否加载到页面底部

 1 <html>
 2 <head>
 3     <meta charset="UTF-8">
 4     <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">
 5     <title>demo</title>
 6 <style>
 7 html{height:100%;}
 8 body{word-break: break-all;position:relative;min-height:81%;min-width:320px;font-family:"\5FAE\8F6F\96C5\9ED1", Helvetica;font-size:13px; color:#1e2939; -webkit-text-size-adjust: none;-webkit-user-select: none; line-height:150%;background-color: #f3f3f3;}
 9 *{margin:0;padding:0;-webkit-tap-highlight-color: transparent;}
10 ul,ol{list-style:none}
11 a,a:visited,a:hover{text-decoration:none;color:#666}
12 a:active{color:#333;}
13 img{vertical-align:middle;border:0;}
14 button,input,select,textarea{vertical-align:middle;outline:none;resize:none;font-family:"\5FAE\8F6F\96C5\9ED1", Helvetica;}
15 input{-webkit-appearance:none;}
16 table{border-collapse:collapse;border-spacing:0}
17 i,em{font-style:normal;}
18 li{
19     width:100%;
20     height:100px;
21     line-height:100px;
22     background:#aeaeae;
23     margin-top:2px;
24     text-align: center;
25 }
26 </style>
27 </head>
28 <body>
29 <ul>
30     <li>列表</li>
31     <li>列表</li>
32     <li>列表</li>
33     <li>列表</li>
34     <li>列表</li>
35     <li>列表</li>
36     <li>列表</li>
37     <li>列表</li>
38     <li>列表</li>
39     <li>列表</li>
40     <li>列表</li>
41     <li>列表</li>
42     <li>列表</li>
43     <li>列表</li>
44     <li>列表</li>
45     <li>列表</li>
46     <li>列表</li>
47     <li>列表</li>
48     <li>列表</li>
49     <li>列表</li>
50 </ul>
51 </body>
52 <script>
53 //获取滚动条当前的位置     
54 function getScrollTop() {
55         var scrollTop = 0;
56         if (document.documentElement && document.documentElement.scrollTop) {
57             scrollTop = document.documentElement.scrollTop;
58         }
59         else if (document.body) {
60             scrollTop = document.body.scrollTop;
61         }
62         return scrollTop;
63 }
64 //获取当前可视范围的高度 
65 function getClientHeight() {
66         var clientHeight = 0;
67         if (document.body.clientHeight && document.documentElement.clientHeight) {
68             var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
69         }
70         else {
71             var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
72         }
73         return clientHeight;
74 }
75  //获取文档完整的高度
76 function getScrollHeight(){
77         return (Math.max(document.body.scrollHeight, document.documentElement.scrollHeight));
78 }
79 
80 window.onscroll = function(){
81     if(getScrollTop() + getClientHeight() >= getScrollHeight()){
82         alert('页面底部');
83     }
84 }
85 </script>
86 </html>
判断页面是否加载到页面底部

猜你喜欢
