Question

我不知道我做的是否正确，但是当用户向下滚动时，我想滚动到下一个div，当用户向上滚动时，我想滚动到页面中的上一个div。
首先，我这样做是为了测试滚动事件和滚动动画：

$(document).ready(function() {
    $(window).scroll(function(){
        $("html, body").animate({
            scrollTop: 1000
        }, 1000);
    });
});

这只是一个测试，但效果很好。
现在，我想区分向下滚动和向上滚动事件以滚动到下一个或上一个div，因此我进行搜索，发现了一些类似的解决方案：

$(document).ready(function() {
    var lastPosition = $(window).scrollTop();

    $(window).scroll(function(){
        var newPosition = $(window).scrollTop();
        if(lastPosition - newPosition > 0){
            $("html, body").animate({
                scrollTop: 1000
            }, 1000);
        }
        else {
            $("html, body").animate({
                scrollTop: 0
            }, 1000);
        }
    });
});

但这不起作用...
我认为向下滚动或向上滚动的方法不适用于我的情况。
您有解决方案吗？或者替代方案？
谢谢。

Answer 1

在您的情况下，应将主体或您的容器的高度设置为窗口高度并且其中的溢出应该设置为隐藏，因为您希望通过javascript滚动到目标Div。

通过在主体或您的容器上设置溢出：隐藏，您预防   窗口在页面上滚动。

body {
    background: #eee;
    height: 100%;
    overflow: hidden;
}

下一步是检测滚动方向（上/下）。您可以   通过滚动事件的 deltaY 属性对其进行检查。

最后，获取下一个或上一个Div，然后滚动到它。   完整的示例是 here

$(window).on('mousewheel DOMMouseScroll', function(event) {

    var deltaY = event.originalEvent.deltaY || event.deltaY;

    if (deltaY > 0) { 

    // Scrolled to Down: Next Div

    } else if (deltaY < 0) {  

    // Scrolled to Up: Previous Div

    }

});

您可以在此处查看完整的代码：

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>

        <style type="text/css">
            body {
                background: #eee;
                height: 100%;
                overflow: hidden;
            }

            .section {
                height: 600px;
            }

            .section.active {
                background: #ccc;
            }
        </style>

    </head>

    <body>
        <div class="active section">Section 1</div>
        <div class="section">Section 2</div>
        <div class="section">Section 3</div>

        <script type="text/javascript">

            $(window).on('mousewheel DOMMouseScroll',function(event) {

                var deltaY = event.originalEvent.deltaY || event.deltaY,
                    $activeSection = $('.section.active'),
                    $container = $('body'),
                    containerOffset = $container[0].offsetTop,
                    $targetSection = null,
                    mustBeScroll = false;

                if(deltaY > 0) { // Scrolled to Down: Next Div

                    if($activeSection.next('.section').length > 0) {
                        $targetSection = $activeSection.next('.section');
                        mustBeScroll = true;
                    }

                } else if (deltaY < 0) {  // Scrolled to Up: Previous Div

                    if ($activeSection.prev('.section').length > 0) {
                        $targetSection = $activeSection.prev('.section');
                        mustBeScroll = true;
                    }

                }

                if(mustBeScroll == true) {

                    $container.stop(false, true).animate({ scrollTop : $targetSection[0].offsetTop - containerOffset }, 500);

                    // Change background color
                    $activeSection.removeClass('active');
                    $targetSection.addClass('active');

                }

            });

        </script>

    </body>
</html>

向下滚动到一个位置，向上滚动到另一个位置

1 个答案: