【应用场景】Javascript滚轮事件控制一次滚动一页

最新推荐文章于 2024-08-14 17:15:24 发布

phil002

最新推荐文章于 2024-08-14 17:15:24 发布

阅读量4.2k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_33594101/article/details/78334445

版权

前端专栏收录该内容

22 篇文章 2 订阅

订阅专栏

//控制鼠标滚轮事件触发
var scrollRuning = true;
/**
 * 控制滚动一次滚动一页
 */
function scrollOnePage(){
        var p = 0, t = 0;
        $(window).scroll(function (e) {
                if(scrollRuning) {
                    scrollRuning = false;
                    p = $(this).scrollTop();
                    var heightNum = Math.floor(p / document.body.clientHeight);
                    if (t <= p) {//向下滚
                        $('body').animate({scrollTop: (heightNum + 1) * document.body.clientHeight + "px"}, 500,function(){
                            setTimeout(function () {
                                scrollRuning = true;
                                t = $(this).scrollTop();
                            },200)
                            return false;
                        });
                    } else {//向上滚
                        $('body').animate({scrollTop: heightNum * document.body.clientHeight + "px"}, 500,function(){
                            setTimeout(function () {
                                scrollRuning = true;
                                t = $(this).scrollTop();
                            },200)
                        })
                    }
                }
        });
}