DTD已声明
IE
- document.documentElement.scrollHeight 浏览器所有内容高度 ,
- document.body.scrollHeight 浏览器所有内容高度
- document.documentElement.scrollTop 浏览器滚动部分高度,
- document.body.scrollTop 始终为0
- document.documentElement.clientHeight 浏览器可视部分高度,
- document.body.clientHeight 浏览器所有内容高度
FF
- document.documentElement.scrollHeight 浏览器所有内容高度
- document.body.scrollHeight 浏览器所有内容高度
- document.documentElement.scrollTop 浏览器滚动部分高度
- document.body.scrollTop 始终为0
- document.documentElement.clientHeight 浏览器可视部分高度
- document.body.clientHeight 浏览器所有内容高度
Chrome
document.documentElement.scrollHeight //浏览器所有内容高度
document.documentElement.clientHeight //浏览器可视部分高度
document.body.scrollHeight //浏览器所有内容高度
document.body.scrollTop //浏览器滚动部分高度
document.body.clientHeight //浏览器所有内容高度
document.documentElement.scrollTop //始终为0
DTD未声明
IE
document.documentElement.scrollHeight //浏览器可视部分高度
document.documentElement.clientHeight //始终为0
document.documentElement.scrollTop //始终为0
document.body.scrollHeight //浏览器所有内容高度
document.body.scrollTop //浏览器滚动部分高度
document.body.clientHeight //浏览器可视部分高度
FF
document.documentElement.scrollHeight //浏览器可视部分高度
document.documentElement.clientHeight //浏览器所有内容高度
document.body.scrollHeight //浏览器所有内容高度
document.body.scrollTop //浏览器滚动部分高度
document.body.clientHeight //浏览器可视部分高度
document.documentElement.scrollTop //始终为0
Chrome
document.documentElement.scrollHeight //浏览器可视部分高度
document.documentElement.clientHeight //浏览器所有内容高度
document.body.scrollHeight //浏览器所有内容高度
document.body.scrollTop //浏览器滚动部分高度
document.body.clientHeight //浏览器可视部分高度
document.documentElement.scrollTop //始终为0
判断滚动条是否已拉到页面最底部,可以用如下代码:
window.onscroll = function () {
var marginBot = 0;
if (document.documentElement.scrollTop) {
marginBot = document.documentElement.scrollHeight –- (document.documentElement.scrollTop+document.body.scrollTop) - document.documentElement.clientHeight;
} else {
marginBot = document.body.scrollHeight – document.body.scrollTop- document.body.clientHeight;
}
if(marginBot<=0) {
// do something
}
}
/********************
* 取窗口滚动条高度
******************/
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) {
var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
} else {
var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
}
return clientHeight;
}
/********************
* 取文档内容实际高度
*******************/
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
function test() {
if (getScrollTop() + getClientHeight() == getScrollHeight()) {
alert("到达底部");
} else {
alert("没有到达底部");
}
}
Jquery判断滚动条是否到达窗口顶部和底部
<script type="text/javascript">
$(document).ready(function(){
alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
var win_height=$(window).height();
var doc_height=$(document).height();
var scroll_top=$(document).scrollTop();
/*
doc_height是文档的高度,scroll_top是滚动条上部离文档顶部的高度,window_height表示窗口高度。
当scroll_top == 0 时,表示滚动条已经到达窗口顶部。
当scroll_top + window_height >= doc_height 时,表示滚动条已经到达窗口底部。
*/
//判断滚动条是否到达窗口底部
$(window).bind('scroll', function(){ //绑定滚动事件
if($(document).scrollTop() + $(window).height() >= $(document).height()){
console.log(win_height);
console.log($(document).scrollTop());
console.log(doc_height);
//......
}
});
});
</script>