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

Posted 2020-08-11 承载梦想-韩旭明

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;