zoukankan      html  css  js  c++  java
  • 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;
    
     
  • 相关阅读:
    java 全组合 与全排列
    (转)java +libsvm 安装与测试:
    ictclas4j 分词工具包 安装流程
    (转)超详细单机版搭建hadoop环境图文解析
    HTML+CSS 滚动条样式自定义
    HTML+CSS之iframe
    思维导图工具 & 原型设计工具
    js setInterval 启用&停止
    jquery 获取 checkbox 的 checked 状态问题
    几个实用的 jQuery 插件
  • 原文地址:https://www.cnblogs.com/hanxuming/p/5913755.html
Copyright © 2011-2022 走看看