onscroll 방향 판단

2677 단어
단순 판단 방향
function scroll( fn ) {  
    var beforeScrollTop = document.body.scrollTop,  
        fn = fn || function() {};  
    window.addEventListener("scroll", function() {  
        var afterScrollTop = document.body.scrollTop,  
            delta = afterScrollTop - beforeScrollTop;  
        if( delta === 0 ) return false;  
        fn( delta > 0 ? "down" : "up" );  
        beforeScrollTop = afterScrollTop;  
    }, false);  
}  


scroll(function(direction) { console.log(direction) });  

상기 방법 핸드폰 애플 브라우저 이벤트 뛰기, 해결 방법 및 코드 개선
scrollDirect: function (fn) {  
    var beforeScrollTop = document.body.scrollTop;  
    fn = fn || function () {  
    };  
    window.addEventListener("scroll", function (event) {  
        event = event || window.event;  
  
        var afterScrollTop = document.body.scrollTop;  
        delta = afterScrollTop - beforeScrollTop;  
        beforeScrollTop = afterScrollTop;  
  
        var scrollTop = $(this).scrollTop();  
        var scrollHeight = $(document).height();  
        var windowHeight = $(this).height();  
        if (scrollTop + windowHeight > scrollHeight - 10) {  //   
            fn('up');  
            return;  
        }  
        if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {  
            fn('up');  
        } else {  
            if (Math.abs(delta) < 10) {  
                return false;  
            }  
            fn(delta > 0 ? "down" : "up");  
        }  
    }, false);  
}  
 

// 
  var upflag=1;  
  var  downflag= 1;  
   //scroll , !  
crollDirect(function (direction) {  
       if (direction == "down") {  
           if (downflag) {  
               $(".footer_wrap").slideUp(200);  
               downflag = 0;  
              upflag = 1;  
           }  
       }  
       if (direction == "up") {  
           if (upflag) {  
               $(".footer_wrap").slideDown(200);  
              downflag = 1;  
               upflag = 0;  
           }  
       }  
});


스크롤 막대 스크롤 끝부분과 머리 판단
BottomJumpPage: function () {  
            var scrollTop = $(this).scrollTop();  
            var scrollHeight = $(document).height();  
            var windowHeight = $(this).height();  
            if (scrollTop + windowHeight == scrollHeight) {  //   
                    console.dir(" ");  
  
            }  
            if (scrollTop == 0) {  //   
            console.dir(" ");  
  
            }  
 }  
 

$(window).scroll(BottomJumpPage); 

좋은 웹페이지 즐겨찾기