javascript - jquery 判断滚动方向 向上还是向下

Question

$(window).on('scroll',function(e){})
如果用jquery判断 滚动 是向上还是向下吗。
看着原生的判断好像有点麻烦。

Answer 1

原生的并不会很麻烦啊，给一个原生的示例吧（可直接在当前页面控制台中运行查看效果），原理就是判断滚动前后的scrollTop来判断到底是上滚还是下滚。懂了原理之后不管是原生的还是 jQuery 的就都 OK 了：

<code>scroll(function(direction) { console.log(direction) });
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);
}
</code>

Answer 2

大师，帮忙看看jq版的，我的bescroll 的值，滚动后一直不变，是个什么情况呢？

<code>var bescroll = $(document).scrollTop();
function ss(){
$(window).scroll(function(){
 var afscroll = $(document).scrollTop();
 var res = afscroll - bescroll;
 if(res>0){
alert('xia'+afscroll);
 }else{
alert('shang'+afscroll);
bescroll = afscroll;
 }
});
}
ss();
</code>