CSSだけでマウスの横スクロールを実現する

一部のWebアプリケーションでは、マウスホイールを使用して横方向にスクロールする必要がある場合があります。通常、ブラウザではマウスホイールは垂直スクロールを制御しますが、適切なレイアウトとCSSを使用することで、洗練された横スクロール効果を簡単にシミュレーションできます。

この記事では、具体的な例を使って、CSSとHTML構造を利用してこの機能を実現する方法を紹介します。

最终效果

考え方

ステップ1： div.image-list を作成して、横方向に複数のカードdivを配置します。 step1

ステップ2： div.image-list を時計回りに90°回転させる。さらに、div.x-scroll-content を作成し、div.image-list をその中に包みます。その後、div.x-scroll-content に高さを指定して縦方向のスクロールバーを表示させます。 step2

ステップ3： div.x-scroll-content を反時計回りに90°回転させる最後に、全体の高さと幅を制御するために div.x-scroll を作成します。 step3

使用シーン

水平の画像ギャラリー。
ECサイトの商品カードの展示。
データ分析用の横スクロール可能な表。

まとめ

この記事では、シンプルなHTMLとCSSを使用して、マウスホイールによる横スクロールを実現する方法を紹介しました。コンテナの回転やスクロール方向の調整を通じて、滑らかで魅力的なスクロール体験を作り出すことができます。プロジェクトで同様のニーズがある場合は、ぜひこの方法を試してみてください！