[解決済み] divスクロールバーを左側に配置するには?
2022-12-17 07:12:03
質問
divの縦スクロールバーの配置に位置(左右)を指定することは可能でしょうか?
例えば このページ で、overflow 属性の使い方が説明されています。そのスクロールバーをスクロール可能な領域の左側に配置する方法はないでしょうか?
どのように解決するのですか?
.list_container {
direction: rtl;
overflow:auto;
height: 50px;
width: 50px;
}
.item_direction {
direction:ltr;
}
<div class="list_container">
<div class="item_direction">1</div>
<div class="item_direction">2</div>
<div class="item_direction">3</div>
<div class="item_direction">4</div>
<div class="item_direction">5</div>
<div class="item_direction">6</div>
<div class="item_direction">7</div>
<div class="item_direction">8</div>
<div class="item_direction">9</div>
<div class="item_direction">10</div>
<div class="item_direction">11</div>
<div class="item_direction">12</div>
</div>
動作例です。 JSFiddle
または
すべての主要なブラウザ(Safariも)で動作するカット&ペーストソリューション
任意の高さまたは幅で動作します。
<style>
.list_container {
direction: rtl;
overflow:auto;
height: 50px;
width: 50px;
}
.item_direction {
direction:ltr;
}
</style>
<div class="list_container">
<div class="item_direction">1</div>
<div class="item_direction">2</div>
<div class="item_direction">3</div>
<div class="item_direction">4</div>
<div class="item_direction">5</div>
<div class="item_direction">6</div>
<div class="item_direction">7</div>
<div class="item_direction">8</div>
<div class="item_direction">9</div>
<div class="item_direction">10</div>
<div class="item_direction">11</div>
<div class="item_direction">12</div>
</div>
オプションで
class="item_direction
を追加すると、コンテナの方向を維持したまま、テキストのフローバックの方向を変更することができます。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] <html xmlns="http://www.w3.org/1999/xhtml">」は何をするものですか?
-
[解決済み] リスト項目にマウスを置いたときに、カーソルを手の形に変えるには?
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] mailto:を使ってメールの件名や内容を設定することはできますか?
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] HTMLのレイアウトにテーブルを使用しない理由は?[クローズド]
-
[解決済み] 要素の片側にボックスシャドウを追加するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Uncaught TypeError: document.getElementsById は関数ではありません。
-
[解決済み] HTMLのテーブルからボーダーを完全に削除する方法
-
[解決済み] slackのチームIDやチャンネルIDを調べる最も簡単な方法は何ですか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] 複数のノンブレイキングスペース("nbsp")ではなく、タブスペースを使用しますか?
-
[解決済み] preタグでテキストを折り返すにはどうしたらよいですか?
-
[解決済み] CSS 背景の不透明度 [重複]について
-
[解決済み] IMGとCSSのbackground-imageはいつ使い分ける?