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

时间:2013-09-11 11:06:42

标签: jquery scroll slide effect

我发现iphone 5C介绍页面的滚动效果非常有趣。 完成滚动当前框后,它将自动捕捉到下一个内容框的顶部。

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

我试图找到涉及一小时的jquery插件但失败了。 请告诉我如何产生这种效果或在哪里找到关于它的教程。

谢谢。

1 个答案:

答案 0 :(得分:2)

我用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;
});