Блог

Я создал простой веб-сайт с вертикальной прокруткой, который привязывает представление к divs, когда пользователь прокручивает страницу вверх или вниз. Вы можете посмотреть демонстрацию здесь: 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 amp;amp; scrollReady == true ) {
        currentScreen  ;
        performScroll();
    }
}

function scrollPrev() {
    if( currentScreen > 0 amp;amp; 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, а затем, когда пользователь снова прокручивает вверх, он прыгает до самого верха … так что происходит что-то странное.

Обновление 2: я заметил, что currentScreen отображается неправильно 2 при прокрутке до второго div, поэтому вы не можете перейти к третьему div. Есть идеи, почему?

Обновление 3: Кажется, что scrollReady переменная не препятствует многократному вызову функций в разных местах, так как при прокрутке вверх и вниз несколько раз вы обнаружите, что разделы прокручиваются несколько раз. Чего не должно быть, вы должны иметь возможность прокручивать только вверх и вниз по одному за раз.

Сохраните значения смещений разделов в переменной, а затем попробуйте, это сработает.

проверьте это в codepen.

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

В функции scrollNext() ваша условная проверка неверна

на втором экране это условие будет ложным, и поэтому оно не переходит на третий экран.

Это должно быть

 currentScreen < screens.length