css的奇淫技巧，实现滚动条在页面左侧显示的效果

滚动条大家都非常熟悉。 一般情况下，它们显示在页面的右侧。 今天我就带大家挑战一下如何实现页面左侧显示滚动条的效果。 当然，我并不是向所有人推荐它。 在实际项目中使用，因为除非需求需要，否则这不遵循正常逻辑。 而我只是想通过这个左侧滚动条的实现为大家提供思路，从而回忆并熟悉CSS相关的知识点。 毕竟时间长了就会忘记。

接下来的实现方法可谓是CSS的奇技淫巧，而Web是一个很大的地方，情况未知，有时需要奇怪的解决方案。

技巧1：定向方法

这里的技巧是让滚动父元素使用 :rtl （或与主方向相反的方向）并使滚动元素的内部切换回正常状态。

这里提一下：rtl属性相关的知识。 网上关于这个属性的解释很少，这里给大家简单解释一下。 只要是码云笔记上发布的前端教程，我都会尽力给小伙伴们讲解的很透彻，大家一起来看看吧。

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

我们先看一下使用:ltr的效果

blockquote {
  direction: ltr;
}

如下所示：

用途：rtl效果

blockquote {
  direction: rtl;
}

效果如下：

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

与 HTML 中的 dir 属性不同，属性不会从表列继承到表单元格，因为 CSS 继承遵循文档流，并且表单元格位于行内，而不是列内。

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

浏览器对属性的支持怎么样？

所有浏览器都支持属性，因此请放心使用它们。

以上是对属性知识的简单介绍。 接下来我们看看如何利用该属性在页面左侧显示垂直滚动条。

HTML文本内容我以朱自清的《春》为例。 这是一篇特别漂亮的文章。 它用诗意的风格描绘了我国南方春天的独特景色：绿草如茵，花木争艳，春风徐徐，细雨绵绵。 有生机、有活力； 春天环境中的人们也充满活力、勤奋、充满希望。 “春”是一幅美丽的春景图，“春”是一曲青春的颂歌。 记得老师让我背诵整篇文章，哈哈，好文章总是好的，现在读起来还是那么令人着迷！

HTML 代码（与技巧 2 相同）：

  

    
盼望着，盼望着，东风来了，春天的脚步近了。
    
一切都象刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
    
  

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;
}

效果如下：

是不是很简单呢？

技巧2：旋转角度

对我来说，出于非文本方向的目的而弄乱文本方向总是让我感到有点害怕，所以这个技巧让我感觉不那么陈词滥调。 诀窍是将父对象旋转 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 技术。

原文链接：