zoukankan      html  css  js  c++  java
  • js监听页面的scroll事件,当移到底部时触发事件

    //页面拉到底时自动加载更多
    $(window).scroll(function(event){
    var wScrollY = window.scrollY; // 当前滚动条位置
    var wInnerH = window.innerHeight; // 设备窗口的高度(不会变)
    var bScrollH = document.body.scrollHeight; // 滚动条总高度
    if (wScrollY + wInnerH >= bScrollH) {
    showMore();
    }
    });

    //监听上下滚动

    var p=0,t=0;  
      
        $(window).scroll(function(e){  
                p = $(this).scrollTop();  
                  
                if(t<=p){//下滚
                   alert(1);  
                }  
                  
                else{//上滚
                     alert(2); 
                }  
                setTimeout(function(){t = p;},0);         
        });  

    //监听上下滑动方向

    $("body").on("touchstart", function(e) {
        e.preventDefault();
        startX = e.originalEvent.changedTouches[0].pageX,
        startY = e.originalEvent.changedTouches[0].pageY;
      });
      $("body").on("touchmove", function(e) {
        e.preventDefault();
        moveEndX = e.originalEvent.changedTouches[0].pageX,
        moveEndY = e.originalEvent.changedTouches[0].pageY,
        X = moveEndX - startX,
        Y = moveEndY - startY;
    
        if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
          alert("left 2 right");
        }
        else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
          alert("right 2 left");
        }
        else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
          alert("top 2 bottom");
        }
        else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
          alert("bottom 2 top");
        }
        else{
          alert("just touch");
        }
      });
    

      

  • 相关阅读:
    为什么MySQL数据库索引选择使用B+树?
    nginx负载均衡策略
    视频笔记
    mysql show full processlist 分析问题
    Git利用命令行提交代码步骤
    zend studio远程自动上传代码并执行
    CentOS7 通过YUM安装MySQL5.7 linux
    PHP的按位运算符是什么意思
    git 分支操作
    php 技术知识点汇总
  • 原文地址:https://www.cnblogs.com/ecmasea/p/9252979.html
Copyright © 2011-2022 走看看