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, .content{
  transform: rotateX(180deg);
}

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

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

1 个答案: