CSS实现将垂直滚动条放置在左侧方法

前言

滚动条对于大家来说再熟悉不过了，正常情况下都是在页面的右侧显示，今天呢我带大家做一个挑战，实现滚动条在页面左侧显示的效果，当然了，我不是推荐大家在实际项目中使用，因为这不符合正常逻辑，除非需求要求这样做。而我只是想通过这一个左侧滚动条实现为大家提供思路，从而回忆熟悉一下css相关知识点，毕竟时间长了总是会遗忘。

接下来实现方式可谓是css的奇淫技巧，而web是一个很大的地方，有着不可知的情况，有时需要奇怪的解决方案。

技巧一：定向方法

这里的诀窍是让滚动的父元素使用direction:rtl（或与主方向相反的方向），并让滚动元素的内部切换回正常值。

这里提一下direction:rtl属性相关知识，在网上关于该属性的讲解很少，所以我在这里为大家做一下简单地讲解。只要是在码云笔记上发布的关于前端教程，都会想方设法为小伙伴们讲解透，一起来看一下。

direction

CSS属性 direction 用来设置文本、表列水平溢出的方向。 rtl 表示从右到左， ltr 表示从左到右。

先看一下使用direction:ltr效果

blockquote {
  direction: ltr;
}

如下图：

使用direction:rtl效果

blockquote {
  direction: rtl;
}

效果如下：

该属性设置可以设置块级元素文本的基本方向，也可以设置由通过 unicode-bidi属性创建的嵌入元素的方向。与此同时，它还可以设置文本、块级元素的默认对齐方式 ，以及表行中的单元格的流动方向。

与 HTML 中的 dir 属性不同，direction属性不会从表列继承到表单元格, 因为 CSS 继承遵从文档流, 而表单元格位于行内部, 但不在列内部。

direction 属性和 unicode-bidi 属性不受 all 属性影响。

关于direction 属性的浏览器支持情况怎么样呢？

所有浏览器都支持 direction 属性，所以放心使用。

以上就是简单介绍direction属性知识，接下来看看如何通过该属性实现垂直滚动条在页面左侧显示的。

HTML文本内容我以朱自清的《春》为例，特别美的文章，它以诗的笔调，描绘了我国南方春天特有的景色：绿草如茵，花木争荣，春风拂煦，细雨连绵，呈现一派生机和活力;在春境中的人，也精神抖擞，辛勤劳作，充满希望。《春》是一幅春光秀丽的画卷，《春》是一曲赞美青春的颂歌。记得当年老师还让全篇背诵的，哈哈，好的文章永远好，现在读还是那么让人着迷！

HTML代码（技巧二通用）：

<div class="scrolling-area">
  <div class="scrolling-element-inside">
    <p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
    <p>一切都象刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p>
    <!-- 一下省略好多个<p></p> -->
  </div>
</div>

CSS代码：

.scrolling-area {
  max-width: 250px;
  max-height: 250px;
  overflow: auto;
  padding: 1rem;
  background: white;
  direction: rtl;
}

.scrolling-element-inside {
  direction: ltr;
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background: antiquewhite;
}

效果如下：

是不是很简单呢。

技巧二：旋转角度

对我来说，为了非文本方向的目的而扰乱文本方向总是让我觉得有点可怕，所以这个技巧让我感觉不那么老套。诀窍是将父对象旋转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一样，但这一次有两个特别尴尬的原因：

1. 默认情况下，滚动元素滚动到底部
2. 滚动方向与滚轮的方向相反。滚动条本身的行为应该和预期的一样，但是触控板或鼠标滚轮会感觉到滚动方向在该元素中被颠倒了。

结语

以上就是码云笔记为大家带大家通过CSS实现垂直滚动条放置在左侧方法，当然实际需求中几乎没遇到过，至少我没遇到，不管怎样，我们又学到了两个css技巧。

原文链接：https://www.mybj123.com/6764.html