Привязка прокрутки окна jQuery

Итак, что я пытаюсь сделать, так это создать страницу с панелями, которые охватывают 100% ширины и высоты.

<body>
  <div class="panel">
  </div>
  <div class="panel">
  </div>
  <div class="panel">
  </div>
</body>

Тело будет переполнено: скрыто. то, что я пытаюсь сделать, это каждый раз, когда пользователь прокручивает определенную сумму, скажем, прокручивая или наполовину вращая колесо, затем он прокручивается до следующей панели. так что это похоже на колоду, которая переносит следующий элемент в окно просмотра.

Я справился с этим следующим образом: но я не могу найти способ не запускать функцию прокрутки миллион раз.

вот мой JS: некрасиво. Я также использую плагин колесика мыши. Но я не совсем уверен, как этого добиться!

var scrollAmt = 0;
        $(window).on('mousewheel', function(event, deltaY){
            $('.projects').addClass('scrolled');
            if(event.originalEvent.wheelDelta > 0) {
                //down  
                    scrollAmt = scrollAmt -= $winHeight;
                    console.log(scrollAmt);
                    $('.projects').animate({marginTop: ''+ scrollAmt +'px'}, 2000);

            } else {
                if ($totalComputed === scrollAmt ){
                    console.log('last');
                } else {

                        scrollAmt = scrollAmt += $winHeight;
                        console.log(scrollAmt);
                        $('.projects').stop().animate({marginTop: '-'+ scrollAmt +'px'}, 2000);

                }
            }
        });

я пытался делать что-то с операторами if и else, но я просто оказался на первом месте.

Я пытаюсь добиться чего-то вроде http://mirkoborsche.com

Любая помощь высоко ценится!

Лучший,


scroll jquery mousewheel
person Community    schedule 04.03.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я думаю, вы могли бы выполнить эту работу с помощью этого плагина: https://github.com/alvarotrigo/fullPage.js .

Кроме того, он, кажется, активно обновляется. Последняя фиксация в репо была сделана 3 дня назад.

Ваше здоровье!

person Noahdecoco    schedule 14.10.2013
comment
Обратите внимание, что ответы только по ссылкам не рекомендуются, ответы SO должны быть конечной точкой поиска. для решения (по сравнению с еще одной остановкой ссылок, которые со временем устаревают). Пожалуйста, рассмотрите возможность добавления здесь отдельного синопсиса, оставив ссылку в качестве ссылки. - person kleopatra; 14.10.2013

arrow_upward
0
arrow_downward

Отмените и повторно привяжите событие прокрутки, чтобы событие прокрутки не срабатывало в определенное время:

Шаблон примерно такой:

$(window).on('mousewheel', processMouse(event, deltaY);

function processMouse(event, deltaY){

    if(event.originalEvent.wheelDelta > 0) {
        // Unbind the mousewheel event
        $(window).off("mousewheel");
        // Do some things like scrolling the page to the next waypoint
    } else {
        // Rebind the mousewheel event
        $(window).on('mousewheel', processMouse(event, deltaY);
    }
}
person Lowkase    schedule 04.03.2013