设置左右,通过:

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;
   }