CSSを介したマウスホイールの水平スクロール効果を実現する方法は？

CSSのヒント：マウスホイールの水平スクロールを簡単に実現する

Webデザインでは、水平方向のスクロールを実現するためにマウスホイールが必要になることがよくあります。デフォルトでは、スクロールホイールは通常、ポートレートスクロールを制御するため、シフトキーを押して水平方向にスクロールする必要がありますが、これは便利ではありません。 JavaScriptはスクロールホイールイベントを聴き、水平スクロールバーを制御できますが、このアプローチにより、スクロールが十分にスムーズではない可能性があります。

この記事では、よりエレガントなソリューションを紹介します。CSSスタイルを使用して水平スクロールを実現します。

以前のJavaScriptメソッド：

 function onsscroll（event）{
  左= -event.wheeldelta ||としますevent.deltay / 2;
  templateListref.value.scrollleft = templatelistref.value.scrollleft左;
}

パフォーマンスの問題と経験が不十分です。

CSSソリューションのコアは回転です。

1. コンテナの回転：コンテナ要素を回転させる-90度、 transform: rotate(-90deg);
2. 子要素を回転させる：容器内の子要素を90度回転させ、 transform: rotate(90deg);

容器と子の要素を回転させることにより、マウスの垂直スクロールは視覚的な水平スクロールに巧妙に変換されます。この方法はシンプルで直接的であり、JavaScriptによってもたらされたパフォーマンスオーバーヘッドを回避し、ユーザーエクスペリエンスを向上させます。スクロールホイールイベントを監視する必要はありません。スクロールはより自然で滑らかです。

以上がCSSを介したマウスホイールの水平スクロール効果を実現する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。