具体的实现方法如下:
$(window).scroll(function() {
如果滚动的高度加上窗口的高度等于页面的高度就是到了底部
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!")//已经滚动到底部
}
})
或者也可以写专用方法检测高度:
function getDocHeight() {
var D = document
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
)
}
然后再用以下方法检测:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == getDocHeight()) {
alert("bottom!")
}
})
使用如下代码可让滚动条默认在最底部:
$(document).ready(function(){
$("#submit").click(function(){
$("#info").append("admin:"+$("#talk").val()+"\n")
$("#info").scrollTop($("#info")[0].scrollHeight)
$("#talk").val("")
})
})
jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。
1、可见高度:viewHeight,可以理解为打开见浏览器空白页见到的空白区域的高度。
2、内容高度:containHeight,这个就是我们关心的高度,它是内容的总高度,包括隐藏在滚动条下面的内容。
3、滚动的高度:scrollHeight,这个是滚动的高度,它是滚动条滚动了多少的意思。
代码解说:
nScrollTop + nDivHight >= nScrollHight。
程序中,在外部div的scroll(滚动)事件中侦测和执行if判断语句,是非常消耗CPU资源的。用鼠标拖拉滚动条,只要有一个像素的变动就会触发该事件。但点击滚动条两头的箭头,事件触发的频率会低得多。所以滚动条的scroll事件要谨慎使用。