Question

是否可以指定在div上放置垂直滚动条的位置（左侧或右侧）？

例如，请查看this page ，其中介绍了如何使用overflow属性。有没有办法将滚动条放在可滚动区域的左侧？

Answer 1

你可以在你的CSS中尝试direction:rtl;。然后重置内部div

中的文字方向

#scroll{
    direction:rtl; 
    overflow:auto; 
    height:50px; 
    width:50px;}

#scroll div{
    direction:ltr;
}

未测试。

Answer 2

我有同样的问题。但是当我在标签和手风琴组合中添加direction: rtl;但是它会崩溃我的结构。

这样做的方法是添加div direction: rtl;作为父元素，添加div div direction: ltr;。

我先用https://api.jquery.com/wrap/

$( ".your selector of child element" ).wrap( "<div class='scroll'></div>" );

然后只需使用css：）

在儿童div中添加到css

 .your_class {
            direction: ltr;    
        }

使用类.scroll

添加jQuery添加的父div

.scroll {
            unicode-bidi:bidi-override;
            direction: rtl;
            overflow: scroll;
            overflow-x: hidden!important;
        }

为我工作

http://jsfiddle.net/jw3jsz08/1/

Answer 3

工作示例：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以更改文本流的方向，同时保留容器方向。

Answer 4

这是一个古老的问题，但我想我应该提出一个在提出这个问题时无法广泛使用的方法。

您可以在父transform: scaleX(-1)上使用<div>在现代浏览器中反转滚动条的一侧，然后应用相同的转换来反转孩子，＆＃34;袖子＆＃34;元件。

HTML

<div class="parent">
  <div class="sleeve">
    <!-- content -->
  </div>
</div>

CSS

.parent {
  overflow: auto;
  transform: scaleX(-1); //Reflects the parent horizontally
}

.sleeve {
  transform: scaleX(-1); //Flips the child back to normal
}

注意：您可能需要使用与IE 9一样旧的浏览器-ms-transform或-webkit-transform前缀。检查CanIUse并点击＆＃34;全部显示＆＃34;查看较旧的浏览器要求。

Answer 5

不，您无法在没有任何其他问题的情况下更改滚动条位置。

您可以将文字方向更改为从右到左（rtl），但它也会更改块内的文字位置。

此代码可以帮助您，但我不确定它是否适用于所有浏览器和操作系统。

<element style="direction: rtl; text-align: left;" />

Answer 6

以下是我为使右滚动条工作所做的工作。唯一需要考虑的是使用＆＃39;方向：rtl＆＃39;整张桌子也需要改变。希望这能让你知道如何做到这一点。

示例：

<table dir='rtl'><tr><td>Display Last</td><td>Display Second</td><td>Display First</td></table>

请检查：JSFiddle

Answer 7

有一个专用的npm软件包。 css-scrollbar-side

如何在左侧放置div滚动条？

7 个答案:

工作示例：JSFiddle

剪切和粘贴适用于所有主流浏览器的解决方案（甚至Safari）