Question

我构建了一个简单的垂直可滚动网站，当用户向上或向下滚动页面时，该网站将视图捕捉到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

将部分偏移的值存储在变量中，然后尝试，它将起作用。

在codepen上查看。

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

Answer 2

在scrollNext（）函数中你的条件检查是错误的

在第二个屏幕上，这个条件将为false，因此它不会移动到第三个屏幕。

应该是

currentScreen < screens.length

使用jQuery在滚动上捕捉到div

2 个答案: