向下滚动后如何滑动到下一个 div 有点像 iphone 5c 页面？

Question

我发现iphone 5C介绍页面的滚动效果很有趣。 滚动完当前框后会自动吸附到下一个内容框的顶部。

http://www.apple.com/hk/iphone-5c/

我花了一个小时试图找到涉及的 jquery 插件但失败了。 请告诉我如何制作该效果或在哪里可以找到有关该效果的教程。

谢谢。

Answer 1

我用 JQuery Mousewheel 插件和 scrollTo 解决了这个问题：

var isScrolling = false;

$('.onepager').mousewheel(function (event, delta) {
    if (!isScrolling) {
        isScrolling = true;
        if (delta < 0) {
            if ($next = $('#navbox').find('.active').next('li').children('a').attr('href')) {
                $('.onepager').scrollTo($next, {
                    offset: -120,
                    duration: 1000,
                    onAfter: function () {
                        isScrolling = false;
                    }
                });
            } else
                isScrolling = false;

        }
        else if (delta > 0) {
            if ($prev = $('#navbox').find('.active').prev('li').children('a').attr('href')) {
                $('.onepager').scrollTo($prev, {
                    offset: -120,
                    duration: 1000,
                    onAfter: function () {
                        isScrolling = false;
                    }
                });
            } else
                isScrolling = false;
        }
    }
    return false;
});