jQuery mousewheel を使って横スクロールを使いやすく

横スクロールは使いづらい

Windows系のマウスは縦スクロールのホイールが基本になっているので、
UIデザインでは基本的に横スクロールはタブーとされています。

ポップアップなどで使う

時々、縦スクロールを横に変換しているサイトもありますが、
WEBページの流れを止めてしまって、ユーザビリティがよろしくないこともありますね。

しかし、ポップアップで画像を流したりしたい時には、
立てスクロールが使えた方が便利なケースがあります。

jQueryプラグインのmousewheelを使って、縦スクロールを横方向に変換

mousewheelイベントを拾う

$(".categories ul", $layer).mousewheel(function(e, delta) {
  var sl;
  sl = $(this).parent().scrollLeft() + (delta * -22);
  $(this).parent().scrollLeft(sl);
  return e.preventDefault();
});

coffeescriptで

$(".categories ul", $layer).mousewheel((e, delta)->
  sl = $(@).parent().scrollLeft() + (delta*-22)
  $(@).parent().scrollLeft(sl)
  e.preventDefault()
);