Question

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

每个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>

Answer 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>

如何逐页滚动（div除div）？

1 个答案: