如何将div滚动条定位在左侧？

Question

是否可以在div上指定一个位置（左侧或右侧）来放置垂直滚动条?

例如看看这个页面，它解释了如何使用overflow属性。是否有一些方法将滚动条放置在可滚动区域的左侧？

- Andrew Fielden

---

看一下这个帖子。恐怕它展示了一些限制。https://dev59.com/OFTTa4cB1Zd3GeqPurGj - Graeme Leighfield

可能是重复的问题：HTML元素滚动条在左侧。 - peirix

Answer 1

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

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

#scroll div{
    direction:ltr;
}

未经测试。

- Jason Gennaro

---

我认为IE和Opera是唯一将滚动条放在RTL内容左侧的浏览器。 - Joey

@Joey 不是真的，Ubuntu下也有Chrome。 - Tom

我想确认Chrome 32在左侧的位置。此时，Firefox在css方面落后并不令人感到惊讶。 - George Mauer

Chrome 39 在 Windows 上也支持它。 - Morteza

可以在Chrome/Mac和Firefox/Mac上工作，但无法在Safari/Mac上工作。 - maxime schoeni

@GeorgeMauer 莫桑比克计划为 RTL 内容保留右侧滚动条。当时，我们认为如果用户必须根据当前页面内容更改肌肉记忆，这将是一个可用性问题。我参与了该讨论，并且可以在 Mozilla 的 Bugzilla 上找到它。 - Tsahi Asher

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

- jasonleonhard

---

乐意效劳。 - jasonleonhard

顺便提一下：这个答案不是有效的HTML，因为它有重复的ID。 应该用class="item_direction"代替id="item_direction", 并使用.item_direction {代替#item_direction {。 - movabo

抱歉，我回复得很快，犯了一个错误，你是正确的，我已经更新了我的答案。 - jasonleonhard

你还可以使用另一个CSS规则来重置所有直接子元素的方向：.list_container > * { direction: ltr; }。 - Erich Schreiner

你是一个绝对的传奇。 - Dima Malko

Answer 3

这是一个有些老旧的问题，但我认为我应该提供一种在这个问题被问出时并不广泛可用的方法。

您可以在现代浏览器中通过在父级<div>上使用transform: scaleX(-1)来反转滚动条的方向，然后将相同的变换应用于反转子元素，即“套袖”元素。

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

- Dom Ramirez

---

这是最杰出的解决方案之一。 - Miron

谢谢！据我所知，改变文本方向也可以实现。但是 transform 属性更加优雅，至少在语义上更加正确。 :) - Dom Ramirez

我认为你也可以通过这种方法受益于一些GPU增强功能。我正在从屏幕的右侧飞入一个菜单，不想让菜单的滚动条出现在页面滚动条旁边...太令人困惑了。使用这种方法比方向切换时获得更少的动画卡顿。 - Davin Studer

这种方法也可以用来将水平滚动条置于顶部：transform: scaleY(-1)。 - Daniel Williams

@DomRamirez 我因此而爱你。 - Awjin

Answer 4

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

解决方法是添加一个父元素为direction: rtl;的

，并为其子

设置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添加到父div中的class为.scroll

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

对我来说完美地工作。

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

- user1597594

---

或者你可以像这样使用CSS：.scrollBarOnLeft { unicode-bidi:bidi-override; direction: rtl; overflow: scroll; overflow-x: hidden!important; } .scrollBarOnLeft>div { direction: ltr; } .scrollBarOnLeft>div>div {} - john k

Answer 5

不，你不能改变滚动条的位置而不会出现其他问题。

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

这段代码可能会对你有帮助，但我不确定它在所有浏览器和操作系统上都能正常工作。

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

- Artem Oliynyk

---

我认为IE和Opera是唯一将RTL内容滚动条放在左侧的浏览器。 - Joey

Answer 6

这是我为使右侧滚动条正常工作所做的事情。唯一需要考虑的是在使用“direction: rtl”时，整个表格也需要更改。希望这能给你一个实现的思路。

示例：

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

请查看：JSFiddle

- Li Kia Chiu

Answer 7

有一个专门的npm包。 css-scrollbar-side

- Andrew Vasylchuk