实例:当滚动条滚动到页面底部时,执行相应的函数
方法一:
$(window).on('scroll', function () {if (that.scrollTimer) {clearTimeout(that.scrollTimer);}that.scrollTimer = setTimeout(function(){var $doc = $(document);if(!that.isPending && ($doc.height() - ($(self).height()+$doc.scrollTop())<= that.loadMoreScroll)){function(){ …… }}}, that.scrollDelay);});
方法二:$(document).ready(function() {$(window).scroll(function() {if ($(document).scrollTop()<=0){alert("滚动条已经到达顶部为0");}if ($(document).scrollTop() >= $(document).height() - $(window).height()) {alert("滚动条已经到达底部为" + $(document).scrollTop());}});});
注:
$doc = $(document):获取当前页面元素的jQuery对象
$doc.height():当前页面高度
$(self).height():滚动条高度
$doc.scrollTop():滚动条距页面顶端的长度
正常情况下,当滚动条滚动到页面底部时:
$doc.height() =
$(self).height() +
$doc.scrollTop()
扩展:
当一个元素的实际高度超过其显示区域的高度时,在一定的设置下,浏览器会为该元素显示相应的垂直滚动条。此时,scrollTop()返回的就是该元素 在可见区域之上被
隐藏部分的高度
(单位:像素)。
如果垂直滚动条在最上面(也就是可见区域之上没有被隐藏的内容),或者当前元素是不可垂直滚动的,那么scrollTop()将返回0。