设置左右，通过：

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;

   }