Javascript:alert(document.body.clientWidth);
//网页可见区域宽(body)alert(document.body.clientHeight);
//网页可见区域高(body)alert(document.body.offsetWidth);
//网页可见区域宽(body)，包括border、margin等alert(document.body.offsetHeight);
//网页可见区域宽(body)，包括border、margin等alert(document.body.scrollWidth);
//网页正文全文宽，包括有滚动条时的未见区域alert(document.body.scrollHeight);
//网页正文全文高，包括有滚动条时的未见区域alert(document.body.scrollTop);
//网页被卷去的Top(滚动条)alert(document.body.scrollLeft);
//网页被卷去的Left(滚动条)alert(window.screenTop);
//浏览器距离Topalert(window.screenLeft);
//浏览器距离Leftalert(window.screen.height);
//屏幕分辨率的高alert(window.screen.width);
//屏幕分辨率的宽alert(window.screen.availHeight);
//屏幕可用工作区的高alert(window.screen.availWidth);
//屏幕可用工作区的宽 Jqueryalert($(window).height());
//浏览器当前窗口可视区域高度alert($(document).height());
//浏览器当前窗口文档的高度alert($(document.body).height());
//浏览器当前窗口文档body的高度alert($(document.body).outerHeight(true));
//浏览器当前窗口文档body的总高度 包括border padding marginalert($(window).width());
//浏览器当前窗口可视区域宽度alert($(document).width());
//浏览器当前窗口文档对象宽度alert($(document.body).width());
//浏览器当前窗口文档body的宽度alert($(document.body).outerWidth(true));
//浏览器当前窗口文档body的总宽度 包括border padding margin

//获取滚动条当前的位置 function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
}
else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
//获取当前可视范围的高度 function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
}
else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}
//获取文档完整的高度 function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}

var upDown = function (opt) {
opt = opt || {
}
;
var up = opt.up || function () {
}
;
window.onscroll = function () {
if (getScrollTop() + getClientHeight() == getScrollHeight()) {
//距离顶部+当前高度 >=文档总高度 即代表滑动到底部 if(is_scroll === true){
//当这个为true的时候调用up方法 ....is_scroll没看懂往下看 up();
}
}
}
}
;

window.onload = function () {
getData();
//页面加载完就显示了第一页 upDown({
up: getData }
);
}

var is_scroll = true;
var count = 0;
function getAjax() {
var el, li;
var xhr = new XMLHttpRequest();
xhr.open('get', 'page' + count + '.json');
xhr.send();
xhr.onreadystatechange = function () {
var loadingEnd = document.getElementById('loadingEnd');
var dropLoad = document.getElementById('dropLoad');
if (xhr.readyState === 4 && xhr.status === 200) {
　　　　　　　　 var res = xhr.responseText;
var data = JSON.parse(res);
allData = allData.concat(data);
//新的一页拼接到后面;
if (data.length === 0) {
//当获取到的数据长度为0 说明没有count+是请求不到数据了 is_scroll = true // 定义为true loadingEnd.style.display = 'block';
//显示没有数据 }
el = document.querySelector("#wrapper ul");
for (var k in data) {
//遍历获取到的每一条数据 li = document.createElement('li');
// 创建节点 li.innerHTML = "<div class='item-top'><span class='item-title'>" + data[k].name + "</span><span class='item-money'>" + data[k].money + "</span></div><div class='item-time'>" + data[k].time + "</div><div class='bottom-line'></div>";
el.appendChild(li, el.childNodes[0]);
}
dropLoad.style.display = 'block';
//显示加载中 }
else {
//这个可有可无 是个假的 不管请求没有请求到都会有个加载中的动画 setTimeout(function () {
dropLoad.style.display = 'none';
}
, 500) }
}
;
}

<style> .drop-load {
text-align: center;
height: 80px;
line-height: 50px;
}
.drop-load .loading {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 100%;
margin: 6px;
border: 2px solid #666;
border-bottom-color: transparent;
vertical-align: middle;
-webkit-animation: rotate 0.75s linear infinite;
animation: rotate 0.75s linear infinite;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.loadingEnd {
font-size: 0.3rem;
color: black;
width: 100%;
height: 40px;
text-align: center;
}
</style>

<body><div> <ul> </ul></div><div id="dropLoad" class="drop-load" style="display: none"> <span class="loading"></span> <span>加载中</span></div><div id="loadingEnd" class="loadingEnd" style="display: none">到底了</div></body>