javascript - 使用 jQuery 在滚动时捕捉到 div

Question

我构建了一个简单的垂直滚动网站，当用户向上或向下滚动页面时，它会将 View 捕捉到 div。你可以在这里看到一个演示:http://dev.driz.co.uk/snap.html

JS 相当简单:

var currentScreen = 0;

var scrollReady = false;

var screens = new Array( 'one',
                         'two',
                         'three');

function scrollNext() {
    if( currentScreen < screens.length-1 && scrollReady == true ) {
        currentScreen++;
        performScroll();
    }
}

function scrollPrev() {
    if( currentScreen > 0 && scrollReady == true ) {
        currentScreen--;
        performScroll();
    }
}

function performScroll() {
    scrollReady = false;    
    var newYPos = Math.ceil($('#'+screens[currentScreen]).offset().top);
    $('.snap').animate({scrollTop: newYPos }, 500, function() { scrollReady = true; });
}

$(document).ready(function() {

    scrollReady = true;

    $('.snap').bind('mousewheel', function (event, aS, aQ, deltaY) {
        event.preventDefault();
        if (deltaY > 0) {
            scrollPrev();
        } else {
            if (deltaY < 0) {
                scrollNext();
            }
        }
        return false;
    });


    $(document).bind('keyup', function (event) {
        if (event.keyCode == 40 || event.keyCode == 38) {
            event.preventDefault();
            if (event.keyCode == 40) {
                if (scrollReady == true) {
                    scrollNext();
                }
            } else {
                if (event.keyCode == 38) {
                    if (scrollReady == true) {
                        scrollPrev();
                    }
                }
            }
        }
    });

    $(document).bind('keydown', function (event) {
        if (event.keyCode == 40 || event.keyCode == 38 ) {
            event.preventDefault();
        }
    });

});

但是我只能滚动到前两个 div 而无法到达第三个...知道为什么会这样吗？我看不到会导致此问题但不会影响前两个工作的问题......

更新:有时您可以让它滚动到第三个 div(上下滚动直到它滚动)，但它会跳过第二个 div，然后当用户再次向上滚动时，它会一直跳到顶部...所以发生了一些奇怪的事情。

更新 2:我注意到当您滚动到第二个 div 时，currentScreen 错误地 2，这就是您无法滚动到第三个 div 的原因。有什么想法吗？

更新 3:似乎 scrollReady 变量并没有阻止函数在某个地方被多次调用，就像你上下滚动几次一样，你会发现部分滚动通过多次。这不应该发生，您一次只能向上滚动一个和向下滚动一个。

Answer 1

把section offsets的值存到变量里试试，会成功的。

在 codepen 上查看。

http://codepen.io/sandeshdamkondwar/pen/veGko?editors=100