如何逐页滚动(div除div)?

时间:2016-02-23 10:27:29

标签: javascript jquery html css jquery-ui

我正在开发一个(可能的)病毒式网站并且后端已经完成,我正在完善前端。

每个div(页面)是100%widht和100%height所以整页。我想创建一个jQuery函数,当用户滚动(使用触控板,鼠标或键盘)时触发,以及用户是上升还是下降,滚动到上一个或下一个div /页面(同时阻止默认滚动动作。)< / p>

知道怎么办?这是我的HTML。

<div class="wrapper">
    <article class="card">page 1</article>
    <article class="card">page 2</article>
    <article class="card">page 3</article>
    <article class="card">page 4</article>
    <article class="card">page 5</article>
</div>

我的Javascript:

<script>
    $(document).ready(function() { 
        $('.card').height($(window).height());
    });
    $(window).resize(function() { $('.card').height($(window).height()); });
    $(window).trigger('resize');
</script>

1 个答案:

答案 0 :(得分:-1)

这个jquery方法应该让你开始:

<!-- Scroller -->
        <script>
        var curPage = 0;

        var pages = [
            "#page1" => 0,
            "#page2" => 1,
            "#page3" => 2,
            "#page4" => 3,
            "#page5" => 4,
            "#page6" => 5,
            "#page7" => 6
        ];

        var name = ".module_row_";

        var scrollable = true;

        jQuery(document).ready(function() {
            jQuery(window).bind('mousewheel', function(event) {
                event.preventDefault();
                if (event.originalEvent.wheelDelta >= 0) {
                    if (curPage > 0 && scrollable) {
                        --curPage;
                        scrollable = false;
                        jQuery('html, body').animate({
                            scrollTop: jQuery(name + curPage).offset().top
                        }, 500, function() {
                            scrollable = true;
                        });
                    }
                }
                else {
                    if (curPage < pages.length && scrollable) {
                        ++curPage;
                        scrollable = false;
                        jQuery('body, html').animate({
                            scrollTop: jQuery(name + curPage).offset().top
                        }, 500, function() {
                            scrollable = true;
                        });
                    }
                }
            });

            jQuery(window).bind('DOMMouseScroll', function(e){
                e.preventDefault();
                if (e.originalEvent.detail > 0) {
                    if (curPage < pages && scrollable) {
                        ++curPage;
                        scrollable = false;
                        jQuery('body, html').animate({
                            scrollTop: jQuery(name + curPage).offset().top
                        }, 500, function() {
                            scrollable = true;
                        });
                    }
                } else {
                    if (curPage > 0 && scrollable) {
                        --curPage;
                        scrollable = false;
                        jQuery('html, body').animate({
                            scrollTop: jQuery(name + curPage).offset().top
                        }, 500, function() {
                            scrollable = true;
                        });
                    }
                }

             });
        });
        </script>