美文网首页
onscroll 判断方向

onscroll 判断方向

作者: 萤火虫de梦 | 来源:发表于2018-01-27 18:01 被阅读658次

单纯判断方向

function scroll( fn ) {  
    var beforeScrollTop = document.body.scrollTop,  
        fn = fn || function() {};  
    window.addEventListener("scroll", function() {  
        var afterScrollTop = document.body.scrollTop,  
            delta = afterScrollTop - beforeScrollTop;  
        if( delta === 0 ) return false;  
        fn( delta > 0 ? "down" : "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 - beforeScrollTop;  
        beforeScrollTop = 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滑动,上滑和下滑只执行一次!  
crollDirect(function (direction) {  
       if (direction == "down") {  
           if (downflag) {  
               $(".footer_wrap").slideUp(200);  
               downflag = 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); 

相关文章

  • onscroll 判断方向

    单纯判断方向 以上方法手机苹果浏览器事件会跳动,解决方法及代码改进 滚动条滚动到底部和头部判断

  • 简历添加js效果

    sticky navbar 黏着导航步骤:window.onscroll监听用户Y方向拖动导航,if 拖动距离大于...

  • vue无感上拉加载更多

    window.addEventListener('scroll',this.onScroll); onScroll...

  • GestureDetector & Scroller

    GestureDetector onScroll onScroll(MotionEvent e1, MotionE...

  • android list view 监听滑到底部

    Android中的应用就是ListView中向下滑动加载更多的功能,不要再onScroll方法中进行判断,那样当滑...

  • 2017-7-30

    收获 window.onscroll 事件,当页面滚动时发生的操作window.onscroll = functi...

  • React onScroll

    直接添加onScroll是有条件的,该元素css属性必须设置height和overflow

  • jsvascript学习(十一)- scroll

    scroll家族方法 1、 onscroll —— 当元素的滚动条滚动时触发的事件 onscroll事件貌似任何实...

  • 小程序上拉加载

    全局上拉加载 在H5中,上拉加载的实现是需要监听window.onscroll事件,通过判断滚动距离和浏览器高度来...

  • RN遇到的bug 随手记录

    1.You specified `onScroll` on a but not `scrollEventThr...

网友评论

      本文标题:onscroll 判断方向

      本文链接:https://www.haomeiwen.com/subject/mqxoaxtx.html