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

Question

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

例如看这个页面，它解释了如何使用溢出属性。 有没有办法将该滚动条放在可滚动区域的左侧？

Answer 1

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

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

#scroll div{
    direction:ltr;
}

未经测试。

Answer 2

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

Answer 3

有点老问题，但我认为我应该提出一种在提出这个问题时尚未广泛使用的方法。

您可以在现代浏览器中使用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并单击“显示全部”以查看较旧的浏览器要求。

Answer 4

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

这样做的方法是添加带有direction: 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;
        }

适合我

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

Answer 5

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

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

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

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

Answer 6

这是我为使正确的滚动条工作所做的工作。 唯一需要考虑的是在使用“direction: rtl”时，整个表也需要更改。 希望这能让你知道如何去做。

例子：

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

检查这个： JSFiddle

Answer 7

它有一个专用的npm包。 css-滚动条侧