前言
滚动条对于大家来说再熟悉不过了，正常情况下都是在页面的右侧显示，今天呢我带大家做一个挑战，实现滚动条在页面左侧显示的效果，当然了，我不是推荐大家在实际项目中使用，因为这不符合正常逻辑，除非需求要求这样做。而我只是想通过这一个左侧滚动条实现为大家提供思路，从而回忆熟悉一下 css 相关知识点，毕竟时间长了总是会遗忘。
接下来实现方式可谓是 css 的奇淫技巧，而 web 是一个很大的地方，有着不可知的情况，有时需要奇怪的解决方案。
技巧一：定向方法
这里的诀窍是让滚动的父元素使用direction:rtl（或与主方向相反的方向），并让滚动元素的内部切换回正常值。
这里提一下direction:rtl属性相关知识，在网上关于该属性的讲解很少，所以我在这里为大家做一下简单地讲解。只要是在上发布的关于前端教程，都会想方设法为小伙伴们讲解透，一起来看一下。
direction
CSS 属性 direction 用来设置文本、表列水平溢出的方向。 rtl 表示从右到左， ltr 表示从左到右。
先看一下使用direction:ltr效果
blockquote {
direction: ltr;
}
如下图：
是不是很简单呢。
技巧二：旋转角度
对我来说，为了非文本方向的目的而扰乱文本方向总是让我觉得有点可怕，所以这个技巧让我感觉不那么老套。诀窍是将父对象旋转 180 度，然后将子对象再向后旋转 180 度，使其再次垂直。
由于第一次旋转，滚动条在另一侧结束。
CSS 代码：
.scrolling-area {
max-width: 250px;
max-height: 250px;
overflow: auto;
padding: 1rem;
background: white;
transform: rotate(180deg);
}
.scrolling-element-inside {
transform: rotate(-180deg);
}
body {
margin: 0;
height: 100vh;
display: grid;
place-items: center;
background: antiquewhite;
}
最终实现的效果和上图 GIF 一样，但这一次有两个特别尴尬的原因：
- 默认情况下，滚动元素滚动到底部
- 滚动方向与滚轮的方向相反。滚动条本身的行为应该和预期的一样，但是触控板或鼠标滚轮会感觉到滚动方向在该元素中被颠倒了。
结语
以上就是为大家带大家通过 CSS 实现垂直滚动条放置在左侧方法，当然实际需求中几乎没遇到过，至少我没遇到，不管怎样，我们又学到了两个 css 技巧。