Javascript 整页滚动

我需要实现平滑的整页滚动。我已经在这页上做过了：

但当我使用滚轮滚动更多页面时，它将滚动更多页面。请问，如何设置为仅滚动一页？

我的代码：

  $(document).ready(function () {
    var divs = $('.service');
    var dir = 'up'; // wheel scroll direction
    var div = 0; // current div
    $(document.body).on('DOMMouseScroll mousewheel', function (e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }
        // find currently visible div :
        div = -1;
        divs.each(function(i){
            if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                div = i;
            }
        });
        if (dir == 'up' && div > 0) {
            div--;
        }
        if (dir == 'down' && div < divs.length) {
            div++;
        }
        //console.log(div, dir, divs.length);
        $('html,body').stop().animate({
            scrollTop: divs.eq(div).offset().top
        }, 800);
        return false;
    });
    $(window).resize(function () {
        $('html,body').scrollTop(divs.eq(div).offset().top);
    });
});

$（文档）.ready（函数（）{
var divs=$（“.service”）；
var dir='up'；//滚轮滚动方向
var div=0；//当前div
$（document.body）.on（'DOMMouseScroll mousewheel'，函数（e）{
如果（e.originalEvent.detail>0 | | e.originalEvent.wheelDelta<0）{
dir='down'；
}否则{
dir='up'；
}
//查找当前可见的div:
div=-1；
每个分区（功能（i）{
if（div=$（window.scrollTop（））{
div=i；
}
});
if（dir=='up'&&div>0）{
分区--；
}
if（dir=='down'&&div

使用防护装置防止处理程序一次运行不止一次，启动函数执行时升起标志，动画结束时重置标志

按照这些思路做的事情应该是可行的（没有测试它，但你应该知道）：

var running=false；
变量处理程序=函数（e）{
如果（正在运行）{
返回；
}
运行=真；
如果（e.originalEvent.detail>0 | | e.originalEvent.wheelDelta<0）{
dir='down'；
}否则{
dir='up'；
}
//查找当前可见的div:
div=-1；
每个分区（功能（i）{
if（div=$（window.scrollTop（））{
div=i；
}
});
if（dir=='up'&&div>0）{
分区--；
}
if（dir=='down'&&div

您可以用另一种方式：

定义最大页数（fe）10页

您可以选择实际页面，从1开始（而不是0用于舒适的编码）

禁用正常滚动

当调用scroll且目标不扩展最大页面和降低最小页面时（不输入#0页面）-滚动

动态检测窗口大小

祝你今天愉快

如果你想在特定元素上滚动-我推荐你

---

注意：使用setInterval（f，1000/60）制作动画，将用户带到clientHeight和实际页面的倍数。

您的网站看起来很棒。有一个现成的很好的解决方案，可以查看完整的页面，并且对滚动效果很好：另外，你可以尝试使用鼠标滚轮事件的去盎司功能。在我看来，你需要实现一个计时器延迟，在此期间，进一步的滚动事件将被取消。你们有什么想法吗？非常感谢Andrea！但它可能不起作用。你能赶上我吗？我是初学者：/不，伙计，我不能为你做你的工作。。。你犯了什么错误？如果您理解这个想法，那么实现它应该不难。var divs没有定义。。。我解决了，非常感谢。我没有意识到我可以查看debug，谢谢你的建议，但我真的不知道如何实现它：/。

var running = false;
var handler = function (e) {
    if (running) {
        return;
    }
    running = true;
    if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
        dir = 'down';
    } else {
        dir = 'up';
    }
    // find currently visible div :
    div = -1;
    divs.each(function(i){
        if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
            div = i;
        }
    });
    if (dir == 'up' && div > 0) {
        div--;
    }
    if (dir == 'down' && div < divs.length) {
        div++;
    }
    //console.log(div, dir, divs.length);
    $('html,body').stop().animate(
        { scrollTop: divs.eq(div).offset().top }, // properties
        800,                                      // duration
        "swing",                                  // easing (needed to use 4th argument)
        function(){ running = false; }            // animation complete callback
    );

    return false;
};

$(document.body).on('DOMMouseScroll mousewheel', handler );