前言
滾動條對於大家來說再熟悉不過了，正常情況下都是在頁面的右側顯示，今天呢我帶大家做一個挑戰，實現滾動條在頁面左側顯示的效果，當然了，我不是推薦大家在實際項目中使用，因為這不符合正常邏輯，除非需求要求這樣做。而我只是想通過這一個左側滾動條實現為大家提供思路，從而回憶熟悉一下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