CSS设置滚动条位置调整

最新推荐文章于 2025-05-08 16:37:17 发布

jiangzhihao0515

最新推荐文章于 2025-05-08 16:37:17 发布

阅读量2.7k

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/jiangzhihao0515/article/details/133932368

版权

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>

结果如下：

2、滚动条位置在上方

// 实现原理
// 将父元素上下翻转 transform: scaleY(-1);
// 再将子元素上下翻转回来 transform: scaleY(-1);
// html

  <div id="father">
    <div id="son">
      It's not easy to live, because experience makes us know a lot. People walk in cold tea, things are right and people are wrong, and everything will become a memory in the blink of an eye.
    </div>
  </div>
// css
   #son {
     width: 500px;
     transform: scaleY(-1);
   }
   #father {
     transform: scaleY(-1);
     width: 300px;
     overflow-x: scroll;
   }

结果如下：