根据视口

Question

我的代码让我非常头疼。我的页面上有10个部分，每个部分都设置为具有窗口的高度，所以我将其设置为：

$('.section').css('height', window.innerHeight);

因此所有部分都与我的窗口具有相同的高度，然后我想在向下滚动时绑定滚动并且＆＃39;第一部分＆＃39;在视口上，然后滚动到第二部分＆＃39;。如果滚动和＆＃39;第二部分＆＃39;在视口上滚动到第三部分＆＃39;等，这有效，但在快速滚动后崩溃......

这是我的全部代码：

HTML

 <section class="section" id="first-section">

 </section> 
 <section class="section" id="second-section">

 </section>
 <section class="section" id="third-section">

 </section>
 <section class="section" id="fourth-section">

 </section>
 <section class="section" id="fifth-section">

 </section>

JS

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";

$(window).bind(mousewheelevt, function(e){
    e.preventDefault(e);

    var evt = window.event || e;
    evt = evt.originalEvent ? evt.originalEvent : evt;
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;

    if(delta > 0) {
        if ($('#second-section').is(':in-viewport')) {
            $('html, body').animate({
                scrollTop: $("#first-section").offset().top
            }, 800);
        } else if ($('#third-section').is(':in-viewport')) {
            $('html, body').animate({
                scrollTop: $("#second-section").offset().top
            }, 800);
        } else if ($('#fourth-section').is(':in-viewport')) {
            $('html, body').animate({
                scrollTop: $("#third-section").offset().top
            }, 800);
        } else if ($('#fifth-section').is(':in-viewport')) {
            $('html, body').animate({
                scrollTop: $("#fourth-section").offset().top
            }, 800);
        }
    } else {
        if ($('#first-section').is(':in-viewport')) {
            $('html, body').animate({
                scrollTop: $("#second-section").offset().top
            }, 800);
        } else if ($('#second-section').is(':in-viewport')) {
            $('html, body').animate({
                scrollTop: $("#third-section").offset().top
            }, 800);
        } else if ($('#third-section').is(':in-viewport')) {
            $('html, body').animate({
                scrollTop: $("#fourth-section").offset().top
            }, 800);
        } else if ($('#fourth-section').is(':in-viewport')) {
            $('html, body').animate({
                scrollTop: $("#fifth-section").offset().top
            }, 800);
        }
    }
});

顺便说一句。 ＆＃39;：在视口＆＃39;如果来自插件，它的效果很好。我知道这个选择器并不存在于真正的代码生活中：）