原生js判断网页滚动条是否到网页最底部
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2016-12-19 10:56:27
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
一般情况用在网页加载更多的时候需要检测当前页面是不是滚动到最底部啦如果是的话就要加载更多的数据,
下面提供一个原生的js写的判断是不是滚动到到啦页面的最底部
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>判断滚动条到页面最下面</title> <style> body{ height:8000px;} .msg{ position:fixed; bottom:0px; right:0px;} </style> </head> <body> <div id="msg" class="msg"></div> <script> window.onscroll=function(){ //取网页卷上去的高度 var h1=document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop; //取网页中能看到高 var h2=document.documentElement.clientHeight?document.documentElement.clientHeight:document.body.clientHeight //取网页正文高,包含被卷上去的内容 var h3=document.documentElement.scrollHeight?document.documentElement.scrollHeight:document.body.scrollHeight; if((h1+h2)==h3){ alert('滚动条已经到最下面啦'); }else{ document.getElementById('msg').innerHTML='h1='+h1+'; h2='+h2+'; h3='+h3+'滚动条位置还没有到最下面,当前的位置是'+(h1+h2)+'总高度是'+h3; //window.status='h1='+h1+'; h2='+h2+'; h3='+h3+'滚动条位置还没有到最下面,当前的位置是'+(h1+h2)+'总高度是'+h3; } }; </script> </body> </html>