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

      

  • 相关阅读:
    自定义MyBatis
    SpringMVC基本
    Struts2访问Servlet
    Struts2的配置
    Rust开发环境搭建
    android webview和 javascript 进行交互
    C#开发step步骤条控件
    如何用cmd命令递归文件夹中的所有特定文件,拷贝到另一个文件夹中
    C#用DesignSurface实现一个简单的窗体设计器
    Roslyn如何实现简单的代码提示
  • 原文地址:https://www.cnblogs.com/ecmasea/p/9252979.html
Copyright © 2011-2022 走看看