js监听scrolltop_js监听页面的scroll事件,当移到底部时触发事件

这篇博客介绍了如何使用JavaScript监听页面滚动事件,当滚动到底部时触发自动加载更多内容的功能。同时,还展示了如何监听用户的上下滚动和滑动方向,包括从上到下、从下到上、从左到右和从右到左的滑动操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//页面拉到底时自动加载更多

$(window).scroll(function(event){

var wScrollY = window.scrollY; // 当前滚动条位置

var wInnerH = window.innerHeight; // 设备窗口的高度(不会变)

var bScrollH = document.body.scrollHeight; // 滚动条总高度

if (wScrollY + wInnerH >= bScrollH) {

showMore();

}

});

//监听上下滚动

var p=0,t=0;

$(window).scroll(function(e){

p= $(this).scrollTop();if(t<=p){//下滚

alert(1);

}else{//上滚

alert(2);

}

setTimeout(function(){t = p;},0);

});

//监听上下滑动方向

$("body").on("touchstart", function(e) {

e.preventDefault();

startX = e.originalEvent.changedTouches[0].pageX,

startY = e.originalEvent.changedTouches[0].pageY;

});

$("body").on("touchmove", function(e) {

e.preventDefault();

moveEndX = e.originalEvent.changedTouches[0].pageX,

moveEndY = e.originalEvent.changedTouches[0].pageY,

X = moveEndX - startX,

Y = moveEndY - startY;

if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {

alert("left 2 right");

}

else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {

alert("right 2 left");

}

else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {

alert("top 2 bottom");

}

else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {

alert("bottom 2 top");

}

else{

alert("just touch");

}

});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值