Question

所以我想做的是将一个页面拆分为4 div s（比方说1,2,3和4）。因此，每当我尝试在div 1之后向下滚动时，页面将自动滚动到div 2;如果我尝试将鼠标向下滚动到div 2下方，它会自动滚动到div 3;和div 3到div 2的方式相同，等等。我确定你在某些在线页面上看到了类似的东西（现在不能想到任何东西但是如果我发现了什么东西我会链接它）。

基本上它会做什么，当你从div向上滚动时，它会自动转换到前一个div的顶部。

我尝试使用jQuery并执行scrollTop，但无法使其正常工作。

Answer 1

见：

$('html, body').animate({scrollTop: $('#div1').offset().top},'slow');

整个代码花了我很长时间才能制作

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>

    <script>
        $(document).ready(function () {
            var n=1;
            var classes=$('.class').length;
            $(window).bind('mousewheel', function(event) {
                if (event.originalEvent.wheelDelta >= 0) {
                    n--;
                    n=n<1?1:n;
                } else {
                    n++;
                    n=n>classes?classes:n;
                }
                //to prevent duplicate event
                setTimeout(function () {
                    $('html,body').animate({scrollTop: $('.class[data-number='+n+']').offset().top},'fast');
                },10);
            });
        });
    </script>
    <style>
        html, body {
            margin: 0;
            height: 100%;
        }

        .class{
            height: 100%;
        }
        .class:nth-child(2n){
            background: red;
        }
        .class:nth-child(2n+1){
            background: blue;
        }
    </style>
</head>
    <body>

    <div class="class" data-number="1" ></div>
    <div class="class" data-number="2" ></div>
    <div class="class" data-number="3" ></div>
    <div class="class" data-number="4" ></div>

    </body>
</html>

在某些点之后强制滚动触发器

1 个答案: