纯CSS设置滚动条位置调整在左侧或者在上方
- 滚动条位置在左侧
// 实现原理
// 设置父元素的文字方向为从右到左 direction: rtl;
// 让所有子元素的文字方向从左到右 direction: ltr;
// css
#son {
direction: ltr;
}
#father {
width: 400px;
height: 200px;
border: 1px solid aqua;
overflow-y: scroll;
direction: rtl;
}
.item {
height: 80px;
border: 1px solid #eee;
}
// html
<div id="father">
<div id="son">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
效果图：
- 滚动条位置在上方
// 实现原理
// 将父元素上下翻转 transform: scaleY(-1);
// 再将子元素上下翻转回来 transform: scaleY(-1);
// html
<div id="father">
<div id="son">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam iste dolorum inventore ab possimus assumenda esse unde fugiat sunt doloribus facere excepturi cupiditate facilis dolor voluptate cum veniam neque officia.
</div>
</div>
// css
#son {
width: 500px;
transform: scaleY(-1);
}
#father {
transform: scaleY(-1);
width: 300px;
overflow-x: scroll;
}
效果图：
