noJSでもマウスホイールでスクロールできる横長のコンテンツを作ってみたら色んなことに出会った

追記:2013年3月19日現在、Google Chrome 27.0.1438.7 dev では以下に書いてある不具合は既に解決されているようです。

タイトルが長いです。

今、手元にホイールのついたマウスがないのでサンプルが探しにくいのですが、こういう感じjQueryで横スクロールのアニメーションするサイトを作る方法 – ウェブロケッツマガジン)のものをnoJSでやってみたら、色々な仕様なのかバグなのかよくわからないことを発見した、というお話。

作り方は簡単でtransformである要素をグルっと270°回転させて(スクロールバーが上にあると気持ちが悪いので更にY軸で180°回転)擬似インラインフレーム化し、更にその中の要素を親要素と逆に回転させて綺麗に並べてやれば出来上がり。図などを書けば物凄く簡単に理解できると思いますが、もはやこれは本題ではないので割愛。

始めにつくったやつ

(ちなみに今後のサンプルでは全て、並べてある要素にabsolute指定していますが、それは位置補正を楽にするためです。jsdo.itの表示サイズのせいなのかmacのfirefoxだと少しボケます。jsdo.itに飛んで貰ってフルスクリーンにしてもらえばOKだと思います。)

縦スクロールで横移動 サンプル1 – jsdo.it – share JavaScript, HTML5 and CSS

firefoxだと割りと問題無い気がするんですが、webkit系のブラウザだと、ある位置より下からしかマウスがコンテンツに反応しません。
中の要素全体のheight(表示上では横の長さ)を指定することでなんとかスクロールは出来ていますが、heightを指定しないとスクロールすら出来なくなります。
どうも中の要素を回転させた後に位置を補正したことをイマイチ上手く認識していないような感じです。
サンプルではtranslateで補正していますが、position:absoluteによるtop/leftで補正しても同じでした。

そういうわけで、次に作ったのやつ

縦スクロールで横移動 サンプル2 – jsdo.it – share JavaScript, HTML5 and CSS

回転軸を0,0に指定してみました。
これで前述の問題はクリア出来たようです。
調子に乗ってページ内アンカーを貼ってみたところtranslateで位置を補正してているので当然だめ…?!
webkit系ブラウザだとリンクをクリックするたびにちょっとずつ右に?(構造上は下に?)移動します。どのリンクをクリックしても同じ動作をします。
なんだコレ?

translateではなくposition:absoluteによるtop/leftで補正

縦スクロールで横移動 サンプル3 – jsdo.it – share JavaScript, HTML5 and CSS

firefoxではページ内アンカーが効くようになりましたが、webkit系では上と同じ動作をします。完全に意味がわかりません。
更に気づいている方もいらっしゃると思いますが、webkit系ブラウザだと上に乗っけている「上下スクロールで横移動するよ」という要素からポインターイベントが消えています。
やっぱり意味がわかりません。

そんな訳でnoJSでマウスホイールでスクロールできる横長のコンテンツは出来ないことは無いですが、よくわからないことが沢山あるということがわかりました。

だれか、ちゃんと検証してくれないかなぁ(チラッ