<!DOCTYPE html>
<html>
<head>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<script language="javascript">
$(document).ready(function (){
var nScrollHight = 0//滚动距离总长(注意不是滚动条的长度)
var nScrollTop = 0 //滚动到的当前位置
var nDivHight = $("#div1").height()
$("#div1").scroll(function(){
nScrollHight = $(this)[0].scrollHeight
nScrollTop = $(this)[0].scrollTop
if(nScrollTop + nDivHight >= nScrollHight)
alert("滚动条到底部了")
})
})
</script>
<div id="div1" style="overflow-y:autooverflow-x:hiddenheight:500px">
<div style="height:750px">
</div>
</div>
</body>
</html>
先上原理图：
判断滚动条是否到临近页面底部，关键是求得上图中 ? 的数值，明显看出这个值 = 文档总高度 - 已滚动部分的高度 - 当前视口高度，所以有如下代码：
var minAwayBtm = 100 // 距离页面底部的最小距离$(window).scroll(function() {
var awayBtm = $(document).height() - $(window).scrollTop() - $(window).height()
console.log('当前距离页面底部：' + awayBtm + 'px')
if (awayBtm <= minAwayBtm) {
console.log('触发了')
}
})
改成这样就可以兼容 IE和chrome<script type="text/javascript">
window.onscroll=function(){
var a = document.documentElement.scrollTop==0? document.body.clientHeight : document.documentElement.clientHeight
var b = document.documentElement.scrollTop==0? document.body.scrollTop : document.documentElement.scrollTop
var c = document.documentElement.scrollTop==0? document.body.scrollHeight : document.documentElement.scrollHeight
if(a+b==c){
showmore()
}
}
</script>
