igor-fedorov
@igor-fedorov
Full Stack разработчик

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

Ребята! Привет. Очень прошу помочь мне. Использую вот этот лайтбокс. 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/
  • Вопрос задан
  • 814 просмотров
Пригласить эксперта
Ответы на вопрос 2
trushka
@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)
Ответ написан
Ivanq
@Ivanq
Знаю php, js, html, css
https://learn.javascript.ru/mousewheel
Вроде в лисе e.detail
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы