一屏滚动滚轮事件

Posted 2020-08-29

参考了one-page.js。为了实现头部尾部效果。我认为很有必要自己写一下，不然用原有的插件我不知道如何实现想要的效果。写的太随意了。以后再做改正吧。

$(function() {
    $(‘header‘).css({
        marginTop: ‘-62px‘,
        transition: "all .25s linear"
    });
    $(‘header‘).removeClass(‘visible‘)
    var sections = $(‘.page‘)
    var lastAnimation=0;

    function init_scroll(event, delta) {
        var leftPos = 0,
            topPos = 0
        var settings = {
            direction: ‘vertical‘,
        }
        $.each(sections, function(i) {
            $(this).css({
                position: "absolute",
                top: topPos + "%"
            }).attr("data-index", i + 1);


            $(this).css({
                position: "absolute",
                left: (settings.direction == ‘horizontal‘) ? leftPos + "%" : 0,
                top: (settings.direction == ‘vertical‘ || settings.direction != ‘horizontal‘) ? topPos + "%" : 0
            });

            if (settings.direction == ‘horizontal‘)
                leftPos = leftPos + 100;
            else
                topPos = topPos + 100;
        });

    }
    init_scroll()
    //添加滚轮事件监听
    $(document).on(‘mousewheel DOMMouseScroll MozMousePixelScroll‘, function(event) {
        event.preventDefault();
        //处理浏览器兼容，判断滚轮方向
        var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
        var pos,current,next;
        var timeNow = new Date().getTime();
        //滚轮事件很容易被连续触发，这里通过获得最近一次触发事件的时间与上一次触发事件
        //的时间相差的值与动画持续时间比较，若小于动画持续时间，则阻止滚轮事件
        if(timeNow - lastAnimation < 500) {
            event.preventDefault();
            return;
        }

        if (delta < 0) { //滚轮向下滚动
            if ($(‘header‘).hasClass(‘visible‘)) {
                /*$(‘header‘).css({
                marginTop: "-62px",
                transition: "all .2s linear"
            });
                setTimeout(function(){$(‘header‘).removeClass(‘visible‘)},500) */
                $(‘header‘).animate({
                    "marginTop": "-62px",
                    },
                    250, function() {
                    $(‘header‘).removeClass(‘visible‘)
                });
                // return false
            }
            else if(!$(‘header‘).hasClass(‘visible‘)) {
                var index=$(".active").data(‘index‘),
                    current=$(".page[data-index=‘" + index + "‘]"),
                    next=$(".page[data-index=‘" + (index + 1) + "‘]"),
                    length=$(‘.page‘).length;
                console.log(length+1)
                if (index<=length+1) {//如果存在下一屏
                    pos=(index * 100) * -1;
                    
                    if (index<length) {
                    current.removeClass("active")
                      next.addClass("active")
                    }
                $(‘.onepage-wrapper‘).css({
                        "-webkit-transform": "translate3d(0," + pos + "%,  0)",
                        "-moz-transform": "translate3d(0," + pos + "%,  0)",
                        "-ms-transform": "translate3d(0," + pos + "%,  0)",
                        "transform": "translate3d(0," + pos + "%,  0)",
                        "-webkit-transition": "all .5s linear",
                        "-moz-transition": "all .5s linear",
                        "-ms-transition": "all .5s linear",
                        "transition": "all .5s linear"
                        });
                }
                // else if (next.data(‘index‘)==length+1) {
                        
                // }
                
            }
        } else { //滚轮向上滚动
            if ($(‘header‘).hasClass(‘visible‘)) return;
            else if ($(‘.active‘).data("index") == 1 && !$(‘header‘).hasClass(‘visible‘)) {
                $(‘header‘).addClass(‘visible‘)
                /*$(‘header‘).css({
                    marginTop: "0px",
                    transition: "all .5s linear"
                });*/　　
                $(‘header‘).animate({
                    "marginTop": "0px",
                    },
                    250);
            } else if ($(‘.active‘).data("index") > 1) {
                /*$(‘header‘).css({
                    marginTop: "-62px",
                    transition: "all .5s linear"
                });*/
                     index=$(".active").data(‘index‘),
                    current=$(".page[data-index=‘" + index + "‘]"),
                    next=$(".page[data-index=‘" + (index - 1) + "‘]");
                if (next.length>0) {//如果存在下一屏

                    pos = ((next.data("index") - 1) * 100) * -1;
                    current.removeClass("active")
                      next.addClass("active")
                $(‘.onepage-wrapper‘).css({
                        "-webkit-transform": "translate3d(0," + pos + "%,  0)",
                        "-moz-transform": "translate3d(0," + pos + "%,  0)",
                        "-ms-transform": "translate3d(0," + pos + "%,  0)",
                        "transform": "translate3d(0," + pos + "%,  0)",
                        "-webkit-transition": "all .5s linear",
                        "-moz-transition": "all .5s linear",
                        "-ms-transition": "all .5s linear",
                        "transition": "all .5s linear"
                        });
                }    
            }

        }
        lastAnimation = timeNow;
    });
})