HTML5网页设计

jQuery

jQuery判断页面滚动条scroll是上滑or下滑

时间:2016-09-02 08:53来自:未知作者:user点击:
webtouch(webapp)页面,防苹果手机safari浏览器,网上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。

webtouch(webapp)页面,防苹果手机safari浏览器,网上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。

通过上滚下滚来让底部导航显示或者因此,安卓上面的浏览器都可以,但是苹果safari会一闪一闪,原因是苹果safari自动有个弹跳效果,导致事件重复执行,解决办法是给上滚下滚一个距离,滚动到一定距离后返回是上滚还是下滚。

单纯判断滚动条方向

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

当前文章地址:http://www.shejicool.com/web/jquery/691.html

阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐