javascript - 使用鼠标滚轮向下/向上滚动一点，滚动到其他 div

Question

这就是我想要实现的http://www.rogerdubuis.com/这是我当前的代码:

var offsetArray = Array();
offsetArray[0] = $('header');
offsetArray[1] = $('#puslapis2');
offsetArray[2] = $('#puslapis5');
offsetArray[3] = $('#puslapis7');
offsetArray[4] = $('#puslapis9');
var pos = 0;
var lastScrollTop = 0;

$(window).scroll(function () {
    console.log("pos " + pos);
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
        console.log("Scroll down");
        $('html,body').animate({scrollTop: offsetArray[pos + 1].ofset().top}, 'slow', function () {pos++;});
    } else {
        console.log("Scroll up");
        $('html,body').animate({scrollTop: offsetArray[pos - 1].ofset().top}, 'slow', function () {pos--;});
    }
    lastScrollTop = st;
});

向下滚动一点后，animate 应该只被调用一次，并且 pos 应该增加 1。但它向下和向上滚动并发生困惑。有什么想法可以防止这种情况发生吗？

Answer 1

我编写了一个插件来管理单页滚动，就像您提供的链接一样。 jQuery Mousewheel Intention

这是我认为你想做的事情的一个 fiddle 。 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));