如何将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到每个项目中，以更改文本回流的方向，同时保留容器的方向。

您可以尝试direction:rtl;使用CSS。然后在内部重置文本方向div

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

#scroll div{
    direction:ltr;
}

未经测试。

我也有同样的问题。但是当我添加direction: rtl;标签和手风琴组合时，却使我的结构崩溃。

做到这一点的方法是将divdirection: rtl;作为父元素添加，对于子div set进行添加direction: ltr;。

我首先使用这个https://api.jquery.com/wrap/

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

然后只需使用CSS :)

在儿童div中添加到CSS

 .your_class {
            direction: ltr;    
        }

并添加到jQuery通过类.scroll添加的父div

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

对我有效

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

有点老问题了，但我想我应该提出一种在提出这个问题时并不广泛使用的方法。

您可以transform: scaleX(-1)在父级上使用现代浏览器中的滚动条一侧<div>，然后应用相同的转换来反转子级“ sleeve”元素。

的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并单击“显示全部”以查看较旧的浏览器要求。

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

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

该代码可以为您提供帮助，但是我不确定它是否可以在所有浏览器和操作系统中使用。

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

这是使右侧滚动条正常工作的方法。唯一需要考虑的是使用“ direction：rtl”时，整个表也需要更改。希望这能给您一个思路。

例：

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

检查此：JSFiddle

有专用的npm包装。css-scrollbar-side