纯CSS设置滚动条位置调整在左侧或者在上方

纯CSS设置滚动条位置调整在左侧或者在上方

1. 滚动条位置在左侧

// 实现原理
// 设置父元素的文字方向为从右到左 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>

效果图：

1. 滚动条位置在上方

// 实现原理
// 将父元素上下翻转 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;
   }

效果图：

转载于：https://blog.csdn.net/weixin_44670249/article/details/116790296