Как осуществить прокрутку колёсиком по горизонтали?

Question

[Сергей Шилов]

Интересует нечто похоже как тут hotdot.ru , может плагин какой есть?

Answer 1

[Сергей delphinpro]

jquery.mouseweel.js

$block.mousewheel(function (event, delta) {
			var scroll = $block.scrollLeft();
			$block.scrollLeft(scroll - (delta * 100));
			return false;
	});

Comments

[Сергей Шилов]

Это он, если я правильно понимаю - https://github.com/jquery/jquery-mousewheel/

$block - это обертка всего контента, верно?

[Сергей delphinpro]

да, он
да, обертка. внутри блок шире обертки

[Сергей Шилов]

Сергей: вам не будет трудно привести рабочий пример на жсфидл например?

[Сергей delphinpro]

Сергей Шилов: jsfiddle.net/DelphinPRO/pv0syhqv

[Сергей Шилов]

Сергей: премного благодарен,

[Роман]

Сергей: здравствуйте! Не могли бы подсказать, есть решение для блокирование вертикального скролла, когда мы отлавливаем горизонтальный? То есть, body у нас скроллится вертикально, а блок в body - горизонтально.

[Сергей delphinpro]

RetroiMe: При использовании плагина, достаточно остановить всплытие события event.stopPropagation() или return false; На ванилле, по идее, тоже можно воспользоваться методом event.stopPropagation(), но у меня сейчас что-то не сработало. jsfiddle.net/DelphinPRO/pv0syhqv/1
Лично я использую плагин, ради кроссбраузерности и простоты использования.

[Роман]

Сергей: вот в этом как раз-таки и проблема. При наведении на div с горизонтальным скроллом, вертикальный скролл от body хорошо бы отключить. Я уже пробовал накладывать на div запрет скролла, но знаний не хватает на то, чтобы запретить только вертикальный скролл.

Answer 2

[Extramezz]

Элемент.addEventListener("onwheel", function(e){
//Для IE9- не сработает, читайте ссылку ниже
var SkolkoPikseleyProkrutiliX = e.deltaX,
SkolkoPikseleyProkrutiliY = e.deltaY;

});

https://learn.javascript.ru/mousewheel

Comments

[Евгений Петров]

Событие называются wheel (для современных браузеров). Для старых webkit и IE mousewheel, а также различные названия для старых FF (DOMMouseScroll, MozMousePixelScroll).

[Extramezz]

Евгений Петров: Да, перепутал =)