Как сделать прокрутку мышью для лайтбокса?

Question

[Igor Fedorov]

Ребята! Привет. Очень прошу помочь мне. Использую вот этот лайтбокс. brutaldesign.github.io/swipebox

Пытаюсь прикрутить к нему колёсико мыши. Получается что-то вроде этого:

$('.slide').on('mousewheel', function(event) {			
	event.preventDefault();
					
	if (event.deltaY/120 > 0) {
		$this.getPrev();
	} else if (event.deltaY/120 < 0) {
		$this.getNext();
	}
});

Однако в Firefox не работает ни в какую. Использую jQuery mousewheel плагин.
Что я делаю не так?

Посмотреть пример можно тут http://bestformat.ru/2015/12/22/арт-1/

Answer 1

[trushka]

Все современные браузеры используют событие wheel, а не mousewheel. Я тут недавно делал, вроде с поддержкой даже старых ИЕ и вебкитов (хотя ff 3.5, кажется, ещё так не умел)

$.event.fixHooks.mousewheel=$.event.fixHooks.wheel={
    filter:function(e, oe){
        e.deltaY=oe.deltaY||-oe.wheelDeltaY;
        if (e.deltaY===undefined) e.deltaY=-oe.wheelDelta||0;
        e.deltaX=oe.deltaX||-oe.wheelDeltaX||0;
        e.deltaZ=oe.deltaZ||0;
        e.deltaMode=oe.deltaMode||0;
        e.toPx=function(el){
            if (e.deltaMode===1) {e.deltaY*=40; e.deltaX*=40; e.deltaZ*=40};
            if (e.deltaMode==2) {
                e.deltaY*=$(el||this).innerHeight();
                e.deltaX*=$(el||this).innerWidth();
            };
        }
        return e
    }
};

if (!window.WheelEvent) $.extend($.event.special, {
    wheel: {delegateType: 'mousewheel', bindType: 'mousewheel'},
    //mousewheel: {preDispatch: function(e) {e.type='wheel'}}
});

Почему закомментировано - не помню, может, мне где-то было важно, чтоб не подменяло тип события.. Вообще, подзабыл немного, как оно там в jQuery всё работает, то что я понаписывал.. Но работает) В общем, событие wheel(), направление и величина - event.deltaY. Если надо в пикселах (а браузеры по-разному дельты выдают, причём фф, кажется, вообще выдаёт при реальном колёсике величину в строках, а при жесте на тачпаде - в пикселах) - в начале обработчика выполнить метод event.toPx(), который может принимать в качестве аргумента элемент, размеры которого используются, если прокрутка установлена в "страницах". по умолчанию - this. Кстати, в данном случае и deltaX не помешает проверить - может сработать, если скроллить жестом на тачпаде в стороны

$('.slide').wheel(function(event) {			
  event.preventDefault();
  event.toPx();
          
  if (event.deltaX>30 || event.deltaY > 30) {
    $this.getPrev();
  } else if (event.deltaX<-30 || event.deltaY < -30) {
    $this.getNext();
  }
});

upd: Кстати, у меня в фф на вашем сайте всё прекрасно работает, но, опять же, на горизонтальную прокрутку тачпадом тоже как-то реагировать хорошо бы. И сильно быстро. Щас переписал немного условия, ато при скролле тачпадом в фф по 10 фоток перематывает при малейшем движении. Надо будет подобрать потом величину порога прокрутки (30px)

Comments

[Igor Fedorov]

У меня тоже в Лисе всё работает, у заказчика в лисе - нет. Хоть убей)) Решили пропустить этот момент. Но вам огромное спасибо!

[Владимир]

Копирую весь код выше, но почему-то выдает ошибку, что wheel не определена, или я что-то не правильно делаю?

[trushka]

Владимир: да, тут немного кажется не до конца.. Хотя там в оригинале у меня вроде всё работает.. А ну да, там же ещё надо задать $.fn.wheel, чтоб использовать без .on()

$.fn.wheel=function(data, fn) {
    return arguments.length ? this.on('wheel', null, data, fn) : this.trigger('wheel');
}

Answer 2

[Ivanq]

https://learn.javascript.ru/mousewheel
Вроде в лисе e.detail