js-scroll判断页面是向上滚动还是向下滚动

原理：那当前的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);

当前内容复制http://www.shejicool.com/web/jquery/691.html；我不生产代码，我只是代码的搬运工

转载于:https://www.cnblogs.com/liuqingxia/p/7590862.html