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:"5FAE8F6F96C59ED1", 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:"5FAE8F6F96C59ED1", 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>