带有css的顶部水平滚动，滚动条在transform中不可见

Question

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

这在FF / Chrome中工作，在Safari中部分工作。

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

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>