本文我们介绍如何将垂直滚动条放到元素左侧的方法。在 CSS 中，并无直接的属性可以达成这一目的。我们需要借助其他手段来实现。

在 CSS 中，direction 属性用来控制文字的走向。默认情况下是从左到右，这符合大多数语言的习惯。当然这个顺序也可以反过来，让文字从右到左排列。当文字顺序反向时，滚动条的位置会被放到元素的左侧。我们可以利用这个特性。但是我们并不希望内部文字的顺序真的反过来。这时我们可以在元素内部嵌套一个 div，将文字顺序再调整回从左到右。

因此，html 部分应该有下面类似结构

1
2
3
4
5
<div class="container">
    <div class="wrapper">
        <div class="content">
    </div>
</div>

我们需要将 .container 元素的文字方向设置成从右到左，然后将 .wrapper 元素的文字方向设置成从左到右，即

1
2
3
4
5
6
7
.container {
    direction: ltr;
}

.wrapper {
    direction: rtl;
}

此时 .container 元素的滚动条就设置到了左侧。