html - 位于 div 顶部的伪元素水平滚动条

Question

我正在使用以下内容来显示水平滚动条:

<div>
   <img src="http://placeimg.com/1000/300/any">
</div>

CSS:

div {
  width: 300px;
  overflow-x: scroll;
}

div::-webkit-scrollbar {
    width:15px;
}

div::-webkit-scrollbar-track {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.1);
}

div::-webkit-scrollbar-thumb {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.3);
}

div::-webkit-scrollbar-thumb:hover {
    background:rgba(0,0,0,0.3);
}

div::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(0,0,0,0.3);
}

但是，正如您从 demo here 中看到的那样，滚动条仅在 div 的底部可见。有没有办法把它放在顶部？

Answer 1

http://codepen.io/anon/pen/xZxNWb

我稍微更改了 HTML:

<div class="wrapper">
  <div class="content">
    <img src="http://placeimg.com/1000/150/any" alt="...">
  </div>
</div>

原来的 div 现在是一个 div.wrapper，我添加了一个 div.content 来保存所有内容。

现在技巧很简单，只需翻转 wrapper ，然后再次翻转内容即可。

.wrapper, .content{
  transform: rotateX(180deg);
}

包装器现在是颠倒的，所以它的滚动条出现在顶部。内容翻转两次以保持不变。