JavaScriptのイベントでよく使うのは click や resize や scroll だと思うんですが、

今日私は新しいイベントを知りました。それが wheel です。

document.addEventListener("wheel", (event) => {
	console.log( event.deltaX + ' - ' + event.deltaY);
});

もうびっくり！

scroll だと、その要素が overflow:scroll などで スクロールできる状態 でないと発火しないけど、
wheel は、スクロールすれば発火する。

普段はこんなもの使わないから知らなかった。

スクロール状態じゃなくても発火するので、

これが可能となる。
（参考：https://developer.mozilla.org/ja/docs/Web/API/Element/wheel_event）

ただ、iOSのSafariには対応していないみたい。。。PCサイトだけで使うしか。

https://caniuse.com/mdn-api_element_wheel_event

なぜこれに出会ったのかというと、この魅力的なWEBサイトのせい。

https://www.tripolis-park.com

どうやって横スクロールを実装しているんだろうと、色々解析したけど、どこを見てもスクロールをさせてる雰囲気はない。

何かがおかしい。

transform: matrix3d は動いているようだけど、君は一体誰に動かされてるの？

document.addEventListener("scroll", (event) => {
	console.log( window.scrollX + ' - ' + window.scrollY);
});

これも反応なし。
そうだよね。スクロールしてないよね。じゃあ君は一体？？？

wheel の仕業だと気づくのに半日くらいかかったかも。

だって、存在さえ知らなかったのだから。

苦労して見つけたから、もうすでに、ちょっと愛着さえある。

やっと見つけた可愛い妖精さん。

君を使う機会はしばらく訪れないだろうけど、いつか君と遊べる日が来るといいな。

なんてね。疲れすぎて頭がどうかしてる。ウィーーーーーール！！！