0

我想构建一个页面滚动器。它是这样工作的:

  • 你在page 1幻灯片上,向下滚动鼠标
  • 你正在(使用animate)向下滚动到page 2
  • 向上/向下滚动是这样的:))

我的问题是 - 当我在动画期间滚动多次时,它会卡住。我怎样才能防止这种情况?

我的幻灯片代码在这里:

function scrollPages() {
        $('section.main').each(function() {
            var prevSection = $(this).prev('section.main'),
                nextSection = $(this).next('section.main'),
                id = $(this).attr('id'),
                scrollFunc = function(dest) {
                $('body, html').stop().animate({
                    scrollTop: dest
                }, 'slow');
            }

            function goUp() {
                if(prevSection.attr('id') != undefined) {
                    var scrollTo = prevSection.offset().top;

                    if(prevSection.attr('id') == 'hi') {
                        $('div.animation').children('div.first').stop().animate({ top: '0' },823);
                        $('div.animation').children('div.secound').stop().animate({ left: '0' },933);
                        $('div.animation').children('div.third').stop().animate({ top: '146px' },559);
                        $('div.animation').children('div.fourth').stop().animate({ top: '30px' },1085);
                        $('div.animation').children('div.fifth').stop().animate({ left: '60px' },860);
                        $('div.animation').children('div.sixth').stop().animate({ top: '30px' },798);
                        $('div.animation').children('div.seventh').stop().animate({ left: '0' },869);
                    }
                    scrollFunc(scrollTo)
                }
            }

            function goDown() {
                if(nextSection.attr('id') != undefined) {
                    var scrollTo = nextSection.offset().top;
                    if(id == 'hi') {
                        $('div.animation').children('div.first').stop().animate({ top: '-999px' },423);
                        $('div.animation').children('div.secound').stop().animate({ left: '-1509px' },533);
                        $('div.animation').children('div.third').stop().animate({ top: '-999px' },359);
                        $('div.animation').children('div.fourth').stop().animate({ top: '-999px' },785);
                        $('div.animation').children('div.fifth').stop().animate({ left: '1999px' },560);
                        $('div.animation').children('div.sixth').stop().animate({ top: '-999px' },498);
                        $('div.animation').children('div.seventh').stop().animate({ left: '-9999px' },569);
                    }

                    scrollFunc(scrollTo);
                }
            }

            $(this).on('mousewheel', function(event, delta) {
                if(delta > 0) {
                    goUp();
                } else {
                    goDown();
                }
            });
        })
    }
4

0 回答 0