css 位于顶部的水平滚动条，滚动条在转换时不可见

Question

我在页面上有一个包含水平滚动内容的元素，滚动条横跨顶部。

这在 FF/Chrome 中有效，部分在 Safari 中有效。

Safari 中的问题是滚动条存在并且可以正常工作，但不可见。在 Safari 的 jsfiddle 中，即使没有显示滚动条，您也可以单击并滚动到顶部。

.testOne {
    transform: rotateX(180deg);
    overflow-x: scroll;
    scrollbar-color: #ffde00 #f7f7f7;
}

.testOne::-webkit-scrollbar {
    height: 20px;
}

.testOne::-webkit-scrollbar-thumb {
    background-color: #ffde00;
}

.testTwo {
    transform: rotateX(180deg);
    width: 100%;
    display: flex;
    visibility: visible;
}

.item {
  padding-right: 10px;
  list-style: none;
}

<ul class="testContainer">
  <span class="testOne">
    <span class="testTwo">
      <li class="item">
        <img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
      </li>
      <li class="item">
        <img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
      </li>
      <li class="item">
        <img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
      </li>
    </span>
  </span>
</ul>

希望有人运行了解这个并且可以建议一种显示滚动条的方法。

Answer 1

当您对直接子元素进行转换时，就会出现问题。尝试将转换向上移动一级到 .testContainer 元素。

.testContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  position: relative;
  overflow-x: hidden;
  transform: rotateX(180deg);
}

.testOne {
  overflow-x: scroll;
}

.testOne::-webkit-scrollbar {
  height: 20px;
}

.testOne::-webkit-scrollbar-thumb {
  background-color: #ffde00;
}

.testTwo {
  transform: rotateX(180deg);
  width: 100%;
  display: flex;
  visibility: visible;
}

.item {
  padding-right: 10px;
  list-style: none;
}

<ul class="testContainer">
  <span class="testOne">
    <span class="testTwo">
      <li class="item">
        <img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
      </li>
      <li class="item">
        <img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
      </li>
      <li class="item">
        <img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
      </li>
    </span>
  </span>
</ul>

css 位于顶部的水平滚动条，滚动条在转换时不可见

Top positioned horizontal scroll with css, scrollbar not visible with transform

css

safari