html - CSS 网格布局 - 如何将滚动条放在左侧，并从左到右填充

Question

如何将滚动条放在左侧，但让 ng-repeat 从左到右填充

我正在使用 ng-repeat 来填充一个 3 x X(宽度 x 高度)的网格，默认情况下滚动条在右边，根据正常的 webview 标准，我想把它放在左边，所以我用了direction: rtl;然而，这个问题现在是我的 ng-repeat 数据也从右到左填充，但我需要数据从左到右显示，就像通常那样。

根据我的理解，direction:rtl 是将滚动条移动到另一边的唯一方法，是否有一些我缺少的工具可以移动不是 direction 的滚动条: rtl，或者是否有其他方法可以将我的内容翻转回 ltr？

我的 HTML:

<div class="h-blue-holding-grid">
  <div class="blue-holding-item" ng-repeat='img in recipeArray'>
    <div class="h-blue-holdingImg"><img src="/imgs/redhead.png" width="45" height="45"></img></div>
    <div class="h-blue-smalltime">{{Math.floor(img.data.data.start_time_ms/1000/60)}}:{{img.data.data.start_time_ms/1000%60}}<span ng-if="img.data.data.start_time_ms/1000%60 < 10">0</span></div>
    <div class="h-blue-smallfont">{{img.data.data.name}}</div>
  </div>
</div>

我的 CSS:

.h-blue-holding-grid{
  width: auto;
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-gap: 3px 3px;
  margin-right: 5vh;
  height: 25.5vh;
  overflow-y: scroll;
  direction: rtl;
}
.blue-holding-item{
  width: 100%;
  height: 8vh;
  text-align: left;
  background-image: url(/imgs/gradient_blue.png);
  background-size: 20vh 8vh;
  color: white;
  font-family: "Segoe UI";
  font-weight: bold;
  display: grid;
  grid-template-columns: auto auto;
}
.h-blue-holdingImg{
  grid-row-start: 1;
  grid-row-end: 3
}

谢谢，

Answer 1

is there some [method] that can move the scrollbar that isn't direction: rtl?

您可以使用 transform: scaleX(-1) 在现代浏览器中反转滚动条的一侧在 parent 身上<div> ，然后应用相同的变换来反转子元素“袖子”。

HTML

<div class="parent">
  <div class="sleeve">
    <!-- content -->
  </div>
</div>

CSS

.parent {
  overflow: auto;
  transform: scaleX(-1); //Reflects the parent horizontally
}

.sleeve {
  transform: scaleX(-1); //Flips the child back to normal
}

参见 this answer在 How to position a div scrollbar on the left hand side?