Ошибка прокрутки firefox + jquery mousewheel

ОБНОВЛЕНИЕ Рабочее исправление, предложенное Дэвидом (см. ниже):

заменить

    $('.scrollMe').bind("mousewheel DOMMouseScroll", ...)

с

    $('.scrollMe').bind("mousewheel DOMMouseScroll MozMousePixelScroll", ...)

ОРИГИНАЛЬНАЯ ПОЧТА

Firefox 16.0.2 (последний) показывает проблему при привязке события "mousewheel/DOMMouseScroll". Прокрутка с помощью колесика мыши, в то время как указатель мыши находится поверх моего целевого div, окно также прокручивается, пока я, очевидно, не хочу этого.

Я попытался добавить несколько методов для прекращения распространения и т.д., но ничего не работает.

Код Javascript:

    $(document).ready(function() {
            $('.scrollMe').bind("mousewheel DOMMouseScroll", function(e) {
                e.stopImmediatePropagation();
                e.stopPropagation();
                e.preventDefault();

                var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);

                $(this).empty();    
                return false;
            });
    });

Чтобы увидеть его в действии, перейдите по ссылке jsFiddle ниже. На странице примера просто поместите указатель мыши внутри div с красными прямоугольниками и используйте колесико для мыши. Firefox будет прокручивать родительское окно в первый раз (неожиданно), в то время как другие браузеры этого не делают.

Пример jsFiddle Code

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

Я также тестировал это в IE9 и Chrome, но не смог обнаружить эту проблему в этих браузерах (это означает, что они не прокручивают окно неожиданно), поэтому я предполагаю, что это зависит от Firefox (также отключается каждый плагин в firefox и т.д.)

Действительно ли это ошибка в firefox (и если есть кросс-браузерный хак, который может сделать трюк)? Или, если вы знаете какое-либо другое решение для достижения того же эффекта, что и ловите событие мыши, не прокручивая окно страницы, не стесняйтесь отвечать!

Ответ 1

Я не могу воспроизвести эту ошибку в моем FF 16.01 OSX с помощью сенсорной панели (отлично работает Fiddle), но я знаю, что есть другое событие, связанное с mozilla, называемое MozMousePixelScroll. Возможно, вы захотите также попробовать это.

В MDN также имеется дополнительная информация: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll

Как побочный элемент, я думаю, что остановить действие по умолчанию с помощью e.preventDefault() должно быть достаточно, не нужно также останавливать распространение (если нет других ошибок IE).

Ответ 2

Чтение https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll кажется, MozMousePixelScroll DOMMouseScroll был для firefox 16 или раньше. Для firefox > 17 используйте событие wheel.

$(document).ready(function() {
        $('.scrollMe').bind("wheel mousewheel", function(e) {
            e.preventDefault();

            var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);

            $(this).empty();    
            return false;
        });
});

Ответ 3

Этот ответ по этому вопросу имеет большинство совместимых с браузерами решений, которые я нашел:

Как определить направление прокрутки

 $('#elem').on( 'DOMMouseScroll mousewheel', function ( event ) { 
    if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
        //scroll down
        console.log('Down');
      } else {
        //scroll up
        console.log('Up');
      }
      //prevent page fom scrolling
      return false;
    });