CSSを使用してスクロールバーの位置を反転するには?

CSS を使用したスクロールバーの位置の反転

スクロールバーの向きの変更

CSS には、スクロールバーの位置を左から右、またはその逆に変更する直接メソッドは提供されていません。その逆も。ただし、間接的なアプローチを使用してこれを実現できます。

右/左反転

スクロールバーを左から右に反転するには:

1. overflow-x: auto; を使用してラッパー コンテナーを定義します。
2. コンテナーの幅を超えるコンテンツを作成します。
3. Use Direction: rtl;ラッパーコンテナ上でスクロールバーを反転します。
4. 方向をオーバーライドします: ltr;テキストの反転を防ぐためにコンテンツに追加します。

CSS:

<code class="css">.Container {
  height: 200px;
  overflow-x: auto;
}
.Content {
  height: 300px;
}

.Flipped {
  direction: rtl;
}
.Flipped .Content {
  direction: ltr;
}</code>

上下反転

同様に、スクロールバーを下から上に反転するには:

1. overflow-y: auto; を使用してラッパー コンテナーを定義します。
2. コンテナーの高さを超えるコンテンツを作成します。
>
3. transform:rotateX(180deg); を使用します。ラッパーコンテナーとそのコンテンツでスクロールバーを上下反転します。

CSS:

<code class="css">.Container {
  width: 200px;
  overflow-y: auto;
}
.Content {
  width: 300px;
}

.Flipped, .Flipped .Content {
  transform:rotateX(180deg);
  -ms-transform:rotateX(180deg); /* IE 9 */
  -webkit-transform:rotateX(180deg); /* Safari and Chrome */
}</code>

以上がCSSを使用してスクロールバーの位置を反転するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。