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

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

未经测试。

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

有点老问题，但我想我应该抛出一个方法，当这个问题被问到时，这个方法并不广泛。

您可以在现代浏览器中使用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
}

注意：您可能需要使用-ms-transform或-webkit-transform前缀作为 IE 9 的旧浏览器。选中CanIUse并单击“显示全部”以查看较旧的浏览器要求。

我有同样的问题。但是当我在选项卡和手风琴组合中添加direction: rtl;时，它会使我的结构崩溃。

要做到这一点的方法是添加 divdirection: rtl;作为父元素，并为子 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;    
        }

并通过 jQuery 与类.scroll 添加父 div

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

为我工作的知府