我们在实际项目中，会遇到滚动要干嘛比如说上拉到顶部，要干嘛，下拉到底部要干嘛，上拉和下拉会有不一样的触发事件，这个时候，我们需要区分，那么怎么区分我们是在上拉还是在下拉，也就是说，怎么区分滚动条是向上还是向下的。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>判断scroll向上还是向下</title>
<style type="text/css">
body,html{
height: 100%;
margin:0;
}
.wrap{
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.scroll{
width: 100%;
height: 300%;
background-color: #f00;
}
</style>
</head>
<body>
<div class="wrap">
<div class="scroll"></div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var scrollTop = 0;
var t = 0;
$(".wrap").scroll(function() {
scrollTop = $(this).scrollTop(); //滚动高度
if(t<=scrollTop){
console.log("往下滚动");
}else{
console.log("往上滚动");
}
setTimeout(function(){t=scrollTop},0);
});
</script>
</html>
代码复制过去，运行一下就可以监测一下对不对了。亲测有效。
网友评论