псевдо-элементы горизонтальной прокрутки расположены в верхней части 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, .content{ 
    transform: rotateX(180deg); 
} 

Обертка теперь перевернута, поэтому ее полоса прокрутки находится сверху. Содержимое дважды переворачивается, поэтому оно остается неизменным.