The horizontal scrollbar of the pseudo-elements located at the top of the div

Question

I use the following to display a horizontal scrollbar:

<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);
}

However, as you can see from the demo here , the scroll bar is only visible at the bottom of the div. Is there any way to place it on top?

Answer 1

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

I changed the HTML a bit:

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

The original is divnow div.wrapper, and I added div.contentto store all the content.

Now the trick is simple, just flip the wrapper and then flip the contents again.

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

, . , .