js判断页面是否出现滚动条,是否滚动到底部

发布时间:2020-04-17编辑:脚本学堂
本文介绍了js判断页面是否出现滚动条,以及jquery判断滚动条到底部并加载数据的方法,判断窗口的滚动条是否接近页面底部,需要的朋友参考下。

js检测浏览器是否出滚动条

思路与技巧:
假如没有出滚动条时,手工给增加一个滚动值会怎么样?
程序上给body或documentElement的scrollLeft、scrollTop赋值,
浏览器在没有出滚动条时,赋值后该值不会发生变化,始终是0。

另外扩展了一下,该检测方法,不仅可以检测页面滚动条,
传入要检测的节点,一样可以得到想要的结果。

代码:
(给scrollLeft,scrollTop赋负数值时会报错,此外scrollLeft,scrollTop的值不能大于实际最大的滚动值)
 

复制代码 代码示例:
var isScroll = function (el) {
// test targets
var elems = el ? [el] : [document.documentElement, document.body];
var scrollX = false, scrollY = false;
for (var i = 0; i < elems.length; i++) {
    var o = elems[i];
    // test horizontal
    var sl = o.scrollLeft;
    o.scrollLeft += (sl > 0) ? -1 : 1;
    o.scrollLeft !== sl && (scrollX = scrollX || true);
    o.scrollLeft = sl;
    // test vertical
    var st = o.scrollTop;
    o.scrollTop += (st > 0) ? -1 : 1;
    o.scrollTop !== st && (scrollY = scrollY || true);
    o.scrollTop = st;
}
// ret
return {
    scrollX: scrollX,
    scrollY: scrollY
};
};

第二部分,jquery判断滚动条到底部并加载数据的方法。js滚动条回到顶部示例代码     js 页面刷新记住滚动条位置的方法   js动态隐藏滚动条(兼容多浏览器 IE FF等)

有些浏览器下会出现累计执行、重复执行的情况,可以在准备执行前和执行完毕加一个执行完毕的标记,当判断上一次执行完毕,再执行该次操作。
 

复制代码 代码示例:
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<title>jQuery实现当拉动滚动条到底部加载数据</title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;} 
a{color:#444;text-decoration: none;} 
a:hover{color:#065BC2;text-decoration: none;} 
.clear{clear:both;} 
img{border:none;vertical-align: middle;} 
ul{list-style: none;} 
</style> 
</head> 
<body> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script type="text/javascript"> 
//首先,窗口绑定事件scroll 
$(window).bind("scroll",function() { 
    // 判断窗口的滚动条是否接近页面底部,这里的20可以自定义 
    if ($(document).scrollTop() + $(window).height() > $(document).height() - 20) { 
       //没有写ajax的调用,直接触发了链接的click事件。 
       $("#container").append('<div style="height:500px">dd</div>'); 
    } // www.jb200.com
}) 
</script> 
</head> 
<body> 
<div id="container"> 
dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>
dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>
dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/> 
</div> 
</body> 
</html>  
 

 
另外,次下拉到最后,浏览器会记住当前滚动条位置,会照成刷新页面后,直接执行操作,所以在刷新页面时要执行,滚动条到顶部的操作。
 

复制代码 代码示例:
<script>  
$(document).ready(function(){ 
    $('body,html').animate({scrollTop:0});  
}); 
</script>  

在jQuery中获取浏览器窗口的尺寸信息
在jQuery中获取浏览器及页面的长度与宽度主要用到以下几个代码:
 

$(window).height()  //浏览器时下窗口可视区域高度
$(document).height()    //浏览器时下窗口文档的高度
$(document.body).height()      //浏览器时下窗口文档body的高度
$(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin
$(window).width()  //浏览器时下窗口可视区域宽度
$(document).width()//浏览器时下窗口文档对于象宽度
$(document.body).width()      //浏览器时下窗口文档body的高度
$(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding margin