滚动条对于大家来说再熟悉不过了，正常情况下都是在页面的右侧显示，今天呢我带大家做一个挑战，实现滚动条在页面左侧显示的效果，当然了，我不是推荐大家在实际项目中使用，因为这不符合正常逻辑，除非需求要求这样做。而我只是想通过这一个左侧滚动条实现为大家提供思路，从而回忆熟悉一下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一样，但这一次有两个特别尴尬的原因：
以上就是码云笔记为大家带大家通过CSS实现垂直滚动条放置在左侧方法，当然实际需求中几乎没遇到过，至少我没遇到，不管怎样，我们又学到了两个css技巧。
原文链接：https://www.mybj123.com/6764.html
本文地址：https://blog.csdn.net/u014316335/article/details/107604530
如对本文有疑问， 点击进行留言回复！！
网友评论