2016-04-23 4 views
0

Я пытаюсь вызвать функцию, когда мышь прокручивается вниз и одна, когда она прокручивается вверх, но, к сожалению, она швы, как будто они оба вызваны.jquery - событие прокрутки мыши запущено странным образом

http://codepen.io/nickimola/pen/ZWjOyB?editors=1010

В загоне, я использую горизонтальную полосу прокрутки, чтобы изменить слайд на мышь прокрутки вниз (имитирует следующий) и мышь прокрутки вверх (имитирует предыдущий).

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

вот код, я использую для обнаружения прокрутки:

$(document).ready(function(){ 
    $('html').bind('mousewheel', function(e){ 
     if(e.originalEvent.wheelDelta/120 > 0) { 
      $.fn.fullpage.moveSlideLeft(); 
      console.log('scrolling up !'); 
     } 
     else{ 
      $.fn.fullpage.moveSlideRight(); 
      console.log('scrolling down !'); 
     } 
    }); 
}); 

и это плагин я использую для горизонтального слайдера и функция обратного вызова: https://github.com/alvarotrigo/fullPage.js#fullpagejs

+0

У вас есть довольно наивный подход ... это не будет работать вообще с трекпадом, так как ваше событие mousewheel будет «спамероваться» с десятками событий прокрутки (нет «щелчка», как у традиционной мыши) – JDB

+0

Я был на самом деле немного боюсь перекрестной совместимости с касаниями, мышами и трекпадами, если честно ... Как вы это сделаете? есть ли у вас предложение? – Nick

+0

Что означает 'e.originalEvent.wheelDelta/120'? – JDB

ответ

1

Есть несколько возможных ответов на этот вопрос, в зависимости от того, кем вы хотите, чтобы ваш Пользовательский опыт был.

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

var delta = e.originalEvent.wheelDelta/120; 
if(delta >= 1) { 
    $.fn.fullpage.moveSlideLeft(); 
    console.log('scrolling up !'); 
} 
else if(delta <= -1){ 
    $.fn.fullpage.moveSlideRight(); 
    console.log('scrolling down !'); 
} 

Это будет игнорировать небольшие действия прокрутки, или крошечные неудачи в направлении после начальный свиток.

Но настоящая проблема заключается в том, что вы пытаетесь вызвать функцию moveSlideRight во время прокрутки. Единственная причина, по которой у вас больше нет проблем, заключается в том, что moveSlideRight, похоже, игнорирует повторяющиеся вызовы, пока он все еще оживляет страницу. Вероятно, лучше было бы использовать какое-то отслеживание времени, чтобы начальный свиток в одном направлении запустил слайд, а затем проигнорировал все другие действия прокрутки в течение некоторого периода времени (возможно, полсекунды). Опять же, это зависит от вашего желаемого UX.

+0

Это достаточно, я думаю. Просто протестирован и работает. Большое спасибо за вашу помощь :) – Nick

+0

@Nick - см. Обновление. – JDB

+0

Хорошо, спасибо за обновление. Я попробую – Nick

Смежные вопросы