jQuery 滚动条高度触发事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery 滚动条高度触发事件相关的知识,希望对你有一定的参考价值。

jQuery 滚动条高度触发事件 想要在页面滚动至距离底部小于800px的时候触发事件
如何定义,例如页面高度是X 当页面滚动到X-800的时候触发事件

参考技术A var wh=$(window).height();
$(window).scroll(function()
var s=wh-$(window).scrollTop();
if(s<800)
alert("小于800了")


);本回答被提问者采纳

JQuery代码实现上拉加载

 1 $(window).scroll(function () {
 2 //已经滚动到上面的页面高度
 3 var sl_top = $(this).scrollTop();
 4 //页面高度
 5 var dm_Height = $(document).height();
 6 //浏览器窗口高度
 7 var wd_Height = $(this).height();
 8 
 9 //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
10 if($(‘#J_loadingData‘).css(‘display‘) == "none"){
11 if (dm_Height == parseInt(sl_top+wd_Height)) {
12 $(‘#J_loadingData‘).show();
13 setTimeout(function(){
14 ajaxData();
15 },3000)
16 }
17 
18 }
19 });
20 //请求数据
21 function ajaxData(){
22 $.get(‘data/index.json‘,function(resp){
23 if(resp.code == 1){
24 $(‘#J_loadingData‘).hide();
25 var liHTML = ‘‘;
26 $.each(resp.data.commodityList,function(){
27 liHTML += ‘< a href=" ">‘
28 +‘<li>‘
29 +‘<div class="left-picture">‘
30 +‘< img src="‘+this.commodityImg+‘" />‘
31 +‘</div>‘
32 +‘<div class="right-info">‘
33 +‘<span class="commodity-title">‘+this.commodityInfo+‘</span>‘
34 +‘<span class="market-price">市场价:¥‘+this.marketPrice+‘</span>‘
35 +‘<span class="sc-price">森巢价:¥‘+this.scPrice+‘</span>‘
36 +‘</div>‘
37 +‘</li>‘
38 +‘</ a>‘;
39 })
40 $(‘.commodity-list‘).append(liHTML);
41 
42 }
43 })
44 }

 

以上是关于jQuery 滚动条高度触发事件的主要内容,如果未能解决你的问题,请参考以下文章

jquery如何判断滚动条滚到页面底部并执行事件

jquery判断滚动条滚到页面底部并执行事件

jquery获取滚动条高度和位置

在js中怎么设置滚动条滚动的距离

js如何监听屏幕滚动到底了

下拉加载更多内容(滚动加载)