小编给大家分享一下jquery判断滚动条是否到底部的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
jquery判断滚动条是否到底部的方法:1、使用【scrollTop()】方法,jquery检测浏览器窗口滚动条到达底部;2、使用【scroll_div】检测动条到达底部事件。
引用><强> jquery判断滚动条是否到底部的方法:强>
<强>一、jquery检测浏览器窗口滚动条到达底部强>
jquery获取位置和尺寸相关函数:
<李>
<代码>(文档)美元.height() 代码>,,获取整个页面的高度
李> <李><代码>(窗口)美元.height() 代码>,,获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变,与文档是不一样的
李> <李><代码> scrollTop() 代码>,,获取匹配元素相对滚动条顶部的偏移。
李> <李><代码> scrollLeft() 代码>,,获取匹配元素相对滚动条左侧的偏移。
李> <李><代码>滚动(((数据),fn))> 代码,,当滚动条发生变化时触犯滚动事件
李>jQuery检测滚动条到达底部代码:
美元(文档)时(函数(),{ (窗口).scroll(美元才能函数(),{ ,, ,,,if (美元(文档).scrollTop () & lt;=0) { ,,,,,警报(“滚动条已经到达顶部为0,); ,,,} ,, ,,,if (美元(文档).scrollTop(),在=,美元(文档).height(),安康;美元(窗口).height ()), { ,,,,,警报(“滚动条已经到达底部为“,+,美元(文档).scrollTop ()); ,,,} ,,}); });<强>二,jQuery检测div中滚动条到达底部强>
上半篇介绍了jQuery检测浏览器窗口滚动条到达底部,其实还并不理解scrollTop和scrollHeight概念,通常滚动条都是放在div中的。
如下检测id为<代码> scroll_div 代码>滚动条到达底部事件:
& lt; div id=皊croll_div",风格=皁verflow-y:汽车;,overflow-x:隐藏;保证金:100 px;高度:500 px;边界:1 px solid red"比; ,,,,,& lt; div 风格=案叨?10000 px"比; ,,,,,,,来自于www . . cn
,,,,,,,来自于www . . cn
,,,,,,,来自于www . . cn
,,,,,& lt;/div> ,,,& lt;/div>首先需要理解几个概念:
<李>
<代码> scrollHeight> 代码:表示滚动条需要滚动的高度,即内部div, 10000 px
李> <李><代码> scrollTop> 代码:表示滚动条滚动的高度,可能大于外部div 500 px
李>也就是说scrollDiv的高度+ scrollTop滚动的最大高度=scrollHeight
于是检测div中div滚动条高度就简单了:
美元(文档)时(函数(),{ 美元才能(“# scroll_div") .scroll(函数(){ ,,,var divHeight =,(这)美元.height (); ,,,var nScrollHeight =,(这)[0].scrollHeight美元; ,,,var nScrollTop =,(这)[0].scrollTop美元; ,,,(“# input1")美元.val (nScrollHeight); ,,,(“# input2")美元.val (nScrollTop); ,,,(“# input3")美元.val (divHeight); ,,,如果(时间+ nScrollTop divHeight 祝辞=,nScrollHeight), { ,,,,,警报(“到达底部了“); ,,,} ,,}); });如果是异步加载数据,数据没加载完,又触犯了同一页的数据加载请求,我通常是加一个标记
美元(文档)时(函数(),{ var 才能;flag =,假; 美元才能(“# scroll_div") .scroll(函数(){ ,,,, ,,,如果(国旗){ ,,,,,//数据加载中 ,,,,,return 假; ,,,} ,,,, ,,,var divHeight =,(这)美元.height (); ,,,var nScrollHeight =,(这)[0].scrollHeight美元; ,,,var nScrollTop =,(这)[0].scrollTop美元; ,,,(“# input1")美元.val (nScrollHeight); ,,,(“# input2")美元.val (nScrollTop); ,,,(“# input3")美元.val (divHeight); ,,,如果(时间+ nScrollTop divHeight 祝辞=,nScrollHeight), { ,,,,,//请求数据 ,,,,,flag =,真的; ,,,,,警报(“到达底部了“); ,,,} ,,}); });以上是“jquery判断滚动条是否到底部的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
jquery判断滚动条是否到底部的方法