左侧的滚动条

Niet the Dark Absol 发表于 Dev

不是黑暗的绝对

我目前使用以下命令使滚动条显示在左侧，而不是右侧：

HTML：

<div class="leftscrollbar"><div>Content here</div></div>

CSS：

.leftscrollbar {
    overflow:auto;
    transform:scaleX(-1);
}
.leftscrollbar>div {
    transform:scaleX(-1);
}

它的效果很好，但是有没有比使用两个转换更好的方法了？

乔什·克罗齐耶（Josh Crozier）

您可以使用该direction物业，

direction: rtl;

设置direction: rtl父元素和direction: ltr子元素：

.leftscrollbar {
  height: 100px;
  overflow: auto;
  direction: rtl;
}

.leftscrollbar>div {
  direction: ltr;
}

<div class="leftscrollbar">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum fusce ut placerat orci nulla pellentesque dignissim enim sit. Pretium quam vulputate dignissim suspendisse in est ante. Purus sit amet luctus venenatis lectus. Integer vitae justo eget magna fermentum. Neque egestas congue quisque egestas diam in arcu cursus euismod. Orci nulla pellentesque dignissim enim sit amet. Pulvinar pellentesque habitant morbi tristique senectus et netus. Sit amet dictum sit amet justo donec enim. Ultrices sagittis orci a scelerisque purus semper eget duis. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Elementum curabitur vitae nunc sed. Adipiscing commodo elit at imperdiet dui. Adipiscing elit pellentesque habitant morbi tristique senectus et. Bibendum arcu vitae elementum curabitur vitae nunc sed velit. Lobortis mattis aliquam faucibus purus in massa tempor nec. Curabitur vitae nunc sed velit dignissim sodales. Aliquet nibh praesent tristique magna sit amet purus. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Turpis massa tincidunt dui ut ornare lectus sit. Neque vitae tempus quam pellentesque. Elit at imperdiet dui accumsan sit amet nulla facilisi. Tempus egestas sed sed risus pretium. Eget gravida cum sociis natoque penatibus et. Amet massa vitae tortor condimentum lacinia quis vel. Sapien et ligula ullamcorper malesuada. 
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。