jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部

Posted 承载梦想-韩旭明

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部相关的知识,希望对你有一定的参考价值。

jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部:http://www.haorooms.com/post/jquery_scroll_upanddown

——————————————————————————————————————

 //滚动条滚动加载更多内容
   //判断滚动方向
   function scroll(fn) {
        var beforeScrollTop = document.body.scrollTop || document.documentElement.scrollTop,
            fn = fn || function() {};
        window.addEventListener("scroll", function() {
            var afterScrollTop = document.body.scrollTop || document.documentElement.scrollTop,
                delta = afterScrollTop - beforeScrollTop;
                if(delta == 0) return false;
                    fn(delta > 0 ? "down" : "up");
                     beforeScrollTop = afterScrollTop;
                    }, false);
                }
    //调用滚动方向:到达底部并且向下滚动的时候,加载更多评论
   scroll(function(direction) {
            if(direction=="down"){
                console.log(direction);

               var scrollTop = $(window).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(window).height();
                //滚动到达底部
                if (scrollTop + windowHeight == scrollHeight) {  
                    $(".commListUl").append(‘<li class="commListLi"><figure class="left"><img src="http://staticcdn.dev.pydp888.com/cms/news/v1/img/listImg1.png"></figure><!-- 内容 --><div class="left commListCon"><p><span>韩旭明</span>&nbsp;&nbsp;<span>1小时前</span></p><p>承担包机任务的是高丽航空商社,也是朝鲜唯一的航空公司,由于大家周知的原因,朝鲜无法获得西方国家的先进客机,高丽航空的飞机全部为前苏联机型,不少都超过了正常服役年限。执飞此次航线的安-148,为中短途支线客机,由乌克兰安托若夫设计局设计,算是朝鲜目前比较新的机型,因朝鲜领导人金正恩经常搭乘该型飞机出行,也被称为"金正恩专机"。</p></div><div style="clear:both;"></div> </li>‘);
                 }
            }                 
         });

——————————————————————————————————————————————————————————

//判断鼠标滑轮方向
 var scrollFunc = function (e) {  
    var direct = 0;  
    e = e || window.event;  
    if (e.wheelDelta) {  //判断浏览器IE,谷歌滑轮事件               
        if (e.wheelDelta > 0) { //当滑轮向上滚动时  
            //alert("滑轮向上滚动");
            var scrollTop = $(window).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(window).height();
                //滚动到达底部
                if (scrollTop + windowHeight == scrollHeight) {  
                    $(".commListUl").append(‘<li class="commListLi"><figure class="left"><img src="http://staticcdn.dev.pydp888.com/cms/news/v1/img/listImg1.png"></figure><!-- 内容 --><div class="left commListCon"><p><span>韩旭明</span>&nbsp;&nbsp;<span>1小时前</span></p><p>承担包机任务的是高丽航空商社,也是朝鲜唯一的航空公司,由于大家周知的原因,朝鲜无法获得西方国家的先进客机,高丽航空的飞机全部为前苏联机型,不少都超过了正常服役年限。执飞此次航线的安-148,为中短途支线客机,由乌克兰安托若夫设计局设计,算是朝鲜目前比较新的机型,因朝鲜领导人金正恩经常搭乘该型飞机出行,也被称为"金正恩专机"。</p></div><div style="clear:both;"></div> </li>‘);
                 }  
         }  
         if (e.wheelDelta < 0) { //当滑轮向下滚动时  
            //alert("滑轮向下滚动");  
         }  
        } else if (e.detail) {  //Firefox滑轮事件  
         if (e.detail> 0) { //当滑轮向上滚动时  
            //alert("滑轮向上滚动");  
            var scrollTop = $(window).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(window).height();
                //滚动到达底部
                if (scrollTop + windowHeight == scrollHeight) {  
                    $(".commListUl").append(‘<li class="commListLi"><figure class="left"><img src="http://staticcdn.dev.pydp888.com/cms/news/v1/img/listImg1.png"></figure><!-- 内容 --><div class="left commListCon"><p><span>韩旭明</span>&nbsp;&nbsp;<span>1小时前</span></p><p>承担包机任务的是高丽航空商社,也是朝鲜唯一的航空公司,由于大家周知的原因,朝鲜无法获得西方国家的先进客机,高丽航空的飞机全部为前苏联机型,不少都超过了正常服役年限。执飞此次航线的安-148,为中短途支线客机,由乌克兰安托若夫设计局设计,算是朝鲜目前比较新的机型,因朝鲜领导人金正恩经常搭乘该型飞机出行,也被称为"金正恩专机"。</p></div><div style="clear:both;"></div> </li>‘);
                 }  
         }  
          if (e.detail< 0) { //当滑轮向下滚动时  
             //alert("滑轮向下滚动");  
         }  
        }  
        ScrollText(direct);  
    }  
    //给页面绑定滑轮滚动事件  
  if (document.addEventListener) {  
      document.addEventListener(‘DOMMouseScroll‘, scrollFunc, false);  
   }  
    //滚动滑轮触发scrollFunc方法  
   window.onmousewheel = document.onmousewheel = scrollFunc;

 

以上是关于jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部的主要内容,如果未能解决你的问题,请参考以下文章

jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部

js鼠标滚轮事件上滚下滚判断

Delphi的控件TScrollBox的问题,隐藏滚动条后, 这个不管用SendMessage咋办啊?? 上滚,下滚,上一页。。

mousewheel,DOMMouseScroll判断滚轮滚动方向

mousewheel,DOMMouseScroll判断滚轮滚动方向

理解鼠标滚动事件