• 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);

  • 相关阅读:
    react 踩坑第一天
    vue-cli+axios+跨域
    vuex 进阶 mapState mapGetter mapActions mapMutations
    vue Bus
    各种html布局
    echarts柱状图设置渐变色
    html设置一个当前时间
    css设置字体渐变色
    C++中指针与引用详解
    go-admin 开源后台管理系统
  • 原文地址:https://www.cnblogs.com/ommph/p/14813171.html
Copyright © 2020-2023  润新知