css设置页面或者容器的滚动条在顶部，上面或者左边

设置左右，通过：

direction: ltr;
direction: rtl;

来实现。

设置顶部，通过反转页面展示来实现：

transform: scaleY(-1);

参考：https://blog.csdn.net/weixin_44670249/article/details/116790296

其中设置滚动条在顶部的代码如下：

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

------------正文已结束，感谢您的阅读（折雨的天空）--------------------

转载请注明本文标题和链接：《css设置页面或者容器的滚动条在顶部，上面或者左边》

取消回复发表评论