CSS实现将垂直滚动条放置在左侧⽅法
前⾔
滚动条对于⼤家来说再熟悉不过了，正常情况下都是在页⾯的右侧显⽰，今天呢我带⼤家做⼀个挑战，实现滚动条在页⾯左侧显⽰的效果，当然了，我不是推荐⼤家在实际项⽬中使⽤，因为这不符合正常逻辑，除⾮需求要求这样做。⽽我只是想通过这⼀个左侧滚动条实现为⼤家提供思路，从⽽回忆熟悉⼀下css相关知识点，毕竟时间长了总是会遗忘。
接下来实现⽅式可谓是css的奇淫技巧，⽽web是⼀个很⼤的地⽅，有着不可知的情况，有时需要奇怪的解决⽅案。
技巧⼀：定向⽅法
这⾥的诀窍是让滚动的⽗元素使⽤direction:rtl（或与主⽅向相反的⽅向），并让滚动元素的内部切换回正常值。
这⾥提⼀下direction:rtl属性相关知识，在⽹上关于该属性的讲解很少，所以我在这⾥为⼤家做⼀下简单地讲解。只要是在码云笔记上发布的关于前端教程，都会想⽅设法为⼩伙伴们讲解透，⼀起来看⼀下。
direction
CSS属性 direction ⽤来设置⽂本、表列⽔平溢出的⽅向。 rtl 表⽰从右到左， ltr 表⽰从左到右。
先看⼀下使⽤direction:ltr效果
blockquote {
direction: ltr;
}
如下图：
direction: ltr;
使⽤direction:rtl效果
blockquote {
direction: rtl;
}
效果如下：
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;
css设置表格滚动条
}
效果如下：
CSS实现将垂直滚动条放置在左侧⽅法
是不是很简单呢。
技巧⼆：旋转⾓度
对我来说，为了⾮⽂本⽅向的⽬的⽽扰乱⽂本⽅向总是让我觉得有点可怕，所以这个技巧让我感觉不那么⽼套。诀窍是将⽗对象旋转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技巧。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。