Question

我需要一些我试图创建的滚动系统的帮助

此代码正在运行..但我想知道如何修复多个火灾事件.. 因为如果我滚动，这会自动进入页面的底部：s，我只想转到下一个div ..

继承人代码：

$(window).on('mousewheel', function(event) {
    event.preventDefault();

    if (event.deltaY > 0) {
        scrolls--;
        if(scrolls < 0) { scrolls = 0; }; 
        console.log(scrolls);
    }
    else if (event.deltaY < 0) {
        scrolls++;
        if(scrolls > 2) { scrolls = 2; }; 
        console.log(scrolls);
    }

    //something you want delayed
    if(scrolls == 0) { 

        $('html,body').animate({ scrollTop: $('#home').offset().top }, 'fast'); 
        $("#sidebar ul li:nth-child(2)").css('background-color','#c0392b');

        //disable
        $("#sidebar ul li:nth-child(3)").css('background-color','');
        $("#sidebar ul li:nth-child(4)").css('background-color','');
        $("#sidebar ul li:nth-child(5)").css('background-color','');
        $("#sidebar ul li:nth-child(6)").css('background-color','');
        $("#sidebar ul li:nth-child(7)").css('background-color','');
        $("#sidebar ul li:nth-child(8)").css('background-color','');
    };

    if(scrolls == 1) { 
        $('html,body').animate({ scrollTop: $('#comunidade').offset().top }, 'fast'); 
        $("#sidebar ul li:nth-child(3)").css('background-color','#c0392b');


        //disable
        $("#sidebar ul li:nth-child(2)").css('background-color','');
        $("#sidebar ul li:nth-child(4)").css('background-color','');
        $("#sidebar ul li:nth-child(5)").css('background-color','');
        $("#sidebar ul li:nth-child(6)").css('background-color','');
        $("#sidebar ul li:nth-child(7)").css('background-color','');
        $("#sidebar ul li:nth-child(8)").css('background-color','');
    };

    if(scrolls == 2) { 
        $('html,body').animate({ scrollTop: $('#works').offset().top }, 'fast'); 
        $("#sidebar ul li:nth-child(4)").css('background-color','#c0392b');

        //disable
        $("#sidebar ul li:nth-child(2)").css('background-color','');
        $("#sidebar ul li:nth-child(3)").css('background-color','');
        $("#sidebar ul li:nth-child(5)").css('background-color','');
        $("#sidebar ul li:nth-child(6)").css('background-color','');
        $("#sidebar ul li:nth-child(7)").css('background-color','');
        $("#sidebar ul li:nth-child(8)").css('background-color','');
    };  
});

由于

Answer 1

我写了一个插件来管理单页滚动。 jQuery Mousewheel Intention

这是我认为你想要做的事情的小提琴。 jsfiddle

(function ($) {
    $(function () {
        var scrolling = false;
        var sections = $('.section');
        var container = $('#container');
        var pos = 0;

        function wheelDirection(evt) {
            if (!evt) {
                evt = event;
            }
            return (evt.detail < 0) ? 1 : (evt.wheelDelta > 0) ? 1 : -1;
        }

        function animate(dir) {
            if (scrolling) {
                return;
            }
            var next = $();
            if (dir === 'down') {
                next = sections.eq(pos).next();
            } else {
                next = sections.eq(pos).prev();
            }
            if (!next.length) {
                return;
            }
            scrolling = true;
            container.animate({
                scrollTop: '+=' + next.offset().top
            }, 'slow', function () {
                pos = sections.index(next);
                sections.removeClass('active');
                next.addClass('active');
                scrolling = false;
            });
        }

        function scroll(event) {
            var direction = wheelDirection(event.originalEvent);
            direction = (direction >= 0) ? 'up' : 'down';
            animate(direction);
        }

        function scrollHandler(event) {
            if (event.certainty > 0.6) {
                scroll(event);
            }
        }

        $(window).on('mousewheelintention', scrollHandler);
    });
}(jQuery));

Jquery，太多被解雇的事件

1 个答案: