CSSでスクロールバーの位置を変更するにはどうすればよいですか？

CSSでスクロールバーの位置を左から右または下から上に変更する方法はありますか？

html css scrollbar

— モーセンサファリ
ソース

ブラウザのスクロールバー？

— Awais Umar 2013

このプラグインを試してくださいjscrollpane.kelvinluck.comこのjqueryプラグインを使用すると、スクロールバーでカスタムcssを実行できます。

— Awais Umar 2013

私が考えることができる唯一のことは、カスタムスクロールバーとスタイルを設定して、好きなように配置することです。@AwaisUmarによって提案されたjscrollpaneプラグインは、私が過去に使用したものであり、かなり良いスタートです。

— Zhihao 2013

むしろすべてのブラウザですが、特定のブラウザについて知っている場合は、教えてください

— Mohsen Safari

純粋なCSSでそれを行う方法はありません。

— itay 2013

回答:

125

CSSのみを使用する：

右/左フリッピング：ワーキングフィドル

.Container
{
    height: 200px;
    overflow-x: auto;
}
.Content
{
    height: 300px;
}

.Flipped
{
    direction: rtl;
}
.Content
{
    direction: ltr;
}

トップ/ボトムフリッピング：ワーキングフィドル

.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 */
}

— avrahamcool
ソース

トップ/ボトムフリッピングフィドルのChrome29でフリップdivされたトップスクロールバーが表示されません。

— Mathijs Flietstra 2013

どうやら、それはブラウザのバグです。答えのフィドルを更新しました。今すぐ確認してください。

— avrahamcool 2013

Google Chrome 35.0.1916.153で二重回転すると、入力/選択に問題が発生します。FFではすべてが正常に機能します。

— lechup 2014年

@lechupフィドルを投稿できますか？私たちは助けようとします。

— avrahamcool 2014年

（Edgeで）バグを発見しました。反転したコンテンツの各行にチェックボックスが付いたテーブルが含まれている場合、ポインタイベントが台無しになります。最後のチェックボックスを選択すると、最初のチェックボックスが選択され、その逆も同様です。フィドルを参照してくださいjsfiddle.net/uPwfn/646

— ジェームズCazzetta

これは別の方法です。forを使用rotating elementしてscrollbar、180deg,それcontentを別の要素にラップし、rotatingそれwrapperを-180deg。以下のスニペットを確認してください

コードスニペットを表示する

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin: 15px;
}
#vertical {
  direction: rtl;
  overflow-y: scroll;
  overflow-x: hidden;
  background: gold;
}
#vertical p {
  direction: ltr;
  margin-bottom: 0;
}
#horizontal {
  direction: rtl;
  transform: rotate(180deg);
  overflow-y: hidden;
  overflow-x: scroll;
  background: tomato;
  padding-top: 30px;
}
#horizontal span {
  direction: ltr;
  display: inline-block;
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=vertical>
  <p>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content</p>
</div>
<div id=horizontal><span> content_content_content_content_content_content_content_content_content_content_content_content_content_content</span>
</div>

スニペットを展開

— プロセス
ソース

賢いですが、少なくとも私のLinux Firefoxでは、ハンドラーとスクロールバーのインセット/アウトセット効果を交換するという副作用があります。これは非常に紛らわしいです。

— Martin Tournoij 2016年

このansowerのを見stackoverflow.com/questions/7889449/...

— shaddad

はい@Carpetsmoker、固定ウィットrtlとltr方向。したがって、ネイティブのスクロール効果があり、scroll-down 下とscroll-up上になります

— プロセス

ええ、それは垂直方向に固定されていますが、水平方向には固定されていません。

— Martin Tournoij 2016年

これを試してみてください。お役に立てれば

<div id="single" dir="rtl">
    <div class="common">Single</div>
</div>

<div id="both" dir="ltr">
    <div class="common">Both</div>
</div>



#single, #both{
    width: 100px;
    height: 100px;
    overflow: auto;
    margin: 0 auto;
    border: 1px solid gray;
}


.common{
    height: 150px;
    width: 150px;
}

— Piyush Arya
ソース

使用する巧妙なアイデアdirは何か新しいことを学びましたが、私も上下が必要でした

— エンドレス