本来我只是想判定一下网页是否滚动到了网页的底部,结果就在这么小的一个问题上,纠结了我好半天,我整个人都被搞懵了,本来用jquery可以很简单的解决这个问题,但是我偏要用js:
网页的高度
一般来讲,我们都用$(“body”).height()就可以很简单的获取到网页的高度,用js就是document.body.clientHeight;这样真的非常正确,超级简单。 以某个网站为例:
document.body.clientHeight
4992
$("body").height()
4992
很好。
然后,我们可以用$(“body”).scrollTop()或者$(window).scrollTop()来获取当前页面的滚动高度,用js的话就是 document.body.scrollTop,差不多,注意js的是属性,而jq的是方法,我把网页拉到了最底端:
document.body.scrollTop
4304
$("body").scrollTop()
4304
$(window).scrollTop()
4304
很好。
我再来获取滚动条的高度,也就是当前网页窗口的高度:
window.innerHeight
705
我是这么想的,网页的滚动距离加上滚动条的高度等于网页的高的话就是到底端了,这样想好像并没有什么问题,但是问题来了,我这么一算:
4304 + 705 = 5009 != 4992
我就纳闷了好半天,是不是我哪里想错了?我就去查,查到了这个:
var s = "网页可见区域宽 :"+ document.body.clientWidth;
s += "网页可见区域高:"+ document.body.clientHeight;
s += "网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
s += "网页正文全文宽:"+ document.body.scrollWidth;
s += "网页正文全文高:"+ document.body.scrollHeight;
s += "网页被卷去的高:"+ document.body.scrollTop;
s += "网页被卷去的左:"+ document.body.scrollLeft;
s += "网页正文部分上:"+ window.screenTop;
s += "网页正文部分左:"+ window.screenLeft;
s += "屏幕分辨率的高:"+ window.screen.height;
s += "屏幕分辨率的宽:"+ window.screen.width;
s += "屏幕可用工作区高度:"+window.screen.availHeight;
s += "屏幕可用工作区宽度:"+window.screen.availWidth;
运行结果是这样的:
网页可见区域宽 :831
网页可见区域高:4992
网页可见区域高:4992 (包括边线的宽)
网页正文全文宽:831
网页正文全文高:5009
网页被卷去的高:4304
网页被卷去的左:0
网页正文部分上:0
网页正文部分左:0
屏幕分辨率的高:768
屏幕分辨率的宽:1366
屏幕可用工作区高度:768
屏幕可用工作区宽度:1366
结果显而易见,问题在于window.body.scrollHeight;
这个属性jq里面是没有的。解释为正文全文高,我不是很懂;
但是只要我用这个来计算是否到达底部就会得到我想要的结果了。
可是问题又来了,我换了一个浏览器,浏览相通的网页,还是拉到最底端,
网页可见区域宽 :831
网页可见区域高:4992
网页可见区域高:4992(包括边线的宽)
网页正文全文宽:831
网页正文全文高:5024
网页被卷去的高:4326
网页被卷去的左:0
网页正文部分上:0
网页正文部分左:0
屏幕分辨率的高:768
屏幕分辨率的宽:1366
屏幕可用工作区高度:768
屏幕可用工作区宽度:1366
我发现window.body.scrollTop 和 window.body.scrollHeight 都变了,也就是是说这两个属性虽然是body上的属性,但是它还是会根据浏览器的不同发生变化,当然window.innerHeight 也会发生变化。
总结
其实出现这样的问题,最终的原因还是在于body自身会受到内部元素的影响,window.body.clientHeight 和 window.body.scrollTop 不同的原因,就是因为可能在body的首个或者末端的元素设置了margin,让body的实际高度变小了。
更新
判断网页的高度不可以用jq中的$(“body”).height() 而应该用 $(document).height(),$(document).height() 与 document.body.scrollHeight 结果是一致的。