js监听页面滚动方向

不管是移动平台还是桌面平台都有需要监听界面滚动方向的需求,简单实现了页面向上滚动、向下滚动、到达顶部、到达底部事件

程序代码 程序代码


(function( $ , undefined ){
        window.__beforeScrollTop = $(window).scrollTop();

        window.addEventListener("scroll", function () {

            var afterScrollTop = $(window).scrollTop(),
                delta = afterScrollTop - __beforeScrollTop,
                viewHeight = $(window).height(),
                docHeight = $(document).height();

            if (delta === 0) return false;

            $(document).trigger( delta > 0 ? "vdown" : "vup");

            if (afterScrollTop === 0) $(document).trigger("vtop");
            if (afterScrollTop + viewHeight === docHeight) $(document).trigger("vend");




            window.__beforeScrollTop = afterScrollTop;

        }, false);
    })( window.Zepto );



    $(function () {
        $(document).on('vup vdown vtop vend', function (e) {
            console.log(e);
        })
    });



文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 滚动 方向 顶部 底部
相关日志:
评论: 0 | 引用: 0 | 查看次数: 673
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭