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

Question

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

例如,请查看此页面,其中说明了如何使用overflow属性.有没有办法将滚动条放在可滚动区域的左侧？

Answer 1

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

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

#scroll div{
    direction:ltr;
}

未经测试.

Answer 2

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

这样做的方法是添加div 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与class .scroll添加到父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>,然后应用相同的转换来反转子项"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 5

不,您无法在没有任何其他问题的情况下更改滚动条放置.

您可以将文本方向更改为从右到左(rtl),但它也会更改块内的文本位置.

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

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