原理:那当前的scrollTop和之前的scrollTop对比
如果变大了,表示向下滚动(scrollTop值变大);
如果变小了,表示向上滚动(scrollTop值变小)。
方法一:js代码:
$(document).ready(function(){ var p=0, t=0; $(window).scroll(function(){ p=$(this).scrollTop(); if(t<p){ //下滚 }else{ //上滚 } setTimeout(function(){ t = p ; },0) }) })
方法二:
1.单纯判断滚动条方向:
function scroll(fn){ var beforeScrollTop = document.body.scrollTop, fn = fn || function(){}; window.addEventListener("scroll",function(){ var afterScrollTop = document.body.scrollTop; delta = afterScrollTop - beterScrollTop; if(delta===0){ return false; } fn(delte>0?"dowm":"up"); beforeScrollTop = afterScrollTop; },false); })
调用方法:scroll(function(direction) { console.log(direction) });
以上方法苹果手机浏览器事件会跳动,解决方法代码改进
scrollDirect: function(fn){ var beforeScrollTop = document.body.scrollTop; fn = fn || function(){}; window.addEventListener("scroll",function(event){ event = event || window.event; var afterScrollTop =document.body.scrollTop; delta = afterScrollTop - befterScrollTop; befterScrollTop = afterScrollTop; var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollTop + windowHeight > scrollHeight - 10){ fn("up"); return; } if(afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10){ fn("up"); }else{ if(Math.abs(delta) < 10){ return false; } fn(delta > 0?"down":"up"); } },false); }
调用方法:
var upflag=1;
var downflag=1;
//scroll滑动,上滑和下滑只执行1次!
crollDirect(function(direction){
if(direction == "down"){
if(downflag){
$(".footer_wrap").slideUp(200);
downlag=0;
upflag=1;
}
}
if(direction=="up"){
if(upflag){
$(".footer_wrap").slideDown(200);
downflag=1;
upflag=0;
}
}
});
滚动条滚动到底部和头部判断
BottomJumpPage:function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollTop + windowHeight == scrollHeight){ //滚动到底部执行事件 console.dir("我到底部了") } if(scrollTop == 0){ //滚动到头部执行事件 console.dir("我到头部了") } }
调用方法:$(window).scroll(BottomJumpPage);
地址:https://www.cnblogs.com/liuqingxia/p/7590862.html
来源:https://www.cnblogs.com/yangsg/p/10616813.html