Задачка для верстальщиков

[dil]

Отдельной рубрики про верстальщиков у меня нет, и вообще я не настоящий сварщик, поэтому пусть будет в задачках для сисадминов.

Сегодня один товарищ в одном совершенно непрофильном сообществе задал интересный вопрос: как сделать, чтобы колёсико мышки осуществляло  на широком сайте _горизонтальный_ скроллинг?

Я немножко погуглил и сделал так. Может, это как-то проще делается?

На фотографии можно внимания не обращать, я взял первые попавшиеся.

Оригинал этой записи. Комментировать можно тут или там.

Любые материалы из этого блога запрещается использовать на сайте livejournal.ru в любой форме и любом объёме

Comments

[smerd-andreyka.livejournal.com]

Не знаю, о чём вы думаете, но... /глядя на фотографии/ ...ехать надо!

А чем непрост этот вариант?

[dil.livejournal.com]

две немаленькие библиотеки для одного-единственного действия. перебор, по-моему.

а фотографии - это 31 декабря, трудолюбивые ирландцы спешат на работу.

[blacklion.livejournal.com]

две немаленькие библиотеки для одного-единственного действия. перебор, по-моему.
Но зачем бибилиотеки-то?! То, что ты сделал с помощью этих библиотек пишется не в одну, но в три строчки, без библиотек вообще.

[dil.livejournal.com]

вот я и спрашиваю: как?

[blacklion.livejournal.com]

Ну, почитай про DOM уже наконец :)
Примерно так (давно не брал в руки шашек, могу наврать в тонких деталях):

var b = document.getElementByName('body');
if(b.attachEvent) { // Bloody IE
 b.attachEvent(
   'onmousewheel'
   function(ev, data) {
    b.scrollLeft -= data * 30;
    ev.preventDefault();
   }
 );
);
} else if(b.addEventListener) { // Saint w3c
 b.addEventListener(
   'mousewheel', 
   function(ev, data) {
    this.scrollLeft -= data * 30;
    ev.preventDefault();
   },
   false
 );
} else { // Something strange and old
 b.onmousewheel = function(ev, data) {
  b.scrollLeft -= data * 30;
  ev.preventDefault();
 };
}

Во всех случаях кроме W3C приходится делать замыкание, так как this ни в IE ни в Legacy правиьно в обработчикх сообщений не работает.

[blacklion.livejournal.com]

Возражение что это не 3 строчки не принимается, так как у меня форматирование красивее чем у тебя :)

[blacklion.livejournal.com]

А, я таки нарвал с data в mousewheel-евенте, там таки хитрее. Но не сильно:

http://adomas.org/javascript-mouse-wheel/

Вот тут всё написано.

[dil.livejournal.com]

спасибо. я просто не знал, по каким ключевым словам правильно искать, я же не настоящий сварщик :)

[blacklion.livejournal.com]

Это ссылка из заголовка использованной тобой библиотеки :)
Я полез код читать и увидел сразу. И, да, оказывается тонкостей между бразерами таки больше (в данном конкретном случае) чем я думал. Про разную обраюботку сообщений я помнил, а вот про разную реализацию этого самого маусвила — нет.

[alexeyten]

Ну, собственно, без JS тут не обойтись. А использовать ли jQuery или onmousewheel — дело привычки.

[dil.livejournal.com]

ну что js, это понятно. но как именно?

[blacklion.livejournal.com]

Понять что ты написал с помощью библиотеки. Не бибилотека тебе придумала onmousewheel и прочее. Всё, что ты использовал — это $ вместо getElementByName и обобщённый от браузера установщик обработки сообщений (а там всего 2 варианта — IE и стандарт, различаются одним if'ом).

[unbe.livejournal.com]

глючит при быстром скроллинге - дергается в обратную сторону

[dil.livejournal.com]

у меня не дергается. наверное, я недостаточно быстро кручу колесо

[unbe.livejournal.com]

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

[unbe.livejournal.com]

на первом попавшемся другом сайте работает нормально http://www.thehorizontalway.com/

[dil.livejournal.com]

у меня под рукой нет тачпада, дома попробую