CODEWITHSUNDEEP
htmlcss
AlexAstanin
AlexAstanin

Reputation: 363

How to place horizontal scrollbar at the top of an element?

I have a div that has a horizontal scrollbar. Is it possible to change the scrollbar position from the bottom of the element to the top, using only CSS?

Upvotes: 7

Views: 17642

Answers (1)

Fred
Fred

Reputation: 2478

Ok, I've come up with this. Modify it to your needs, but this is all you need, you only need CSS, no JS. THIS DOES NOT CHANGE THE SCROLLBAR, it flips it to be at the top, instead of the bottom. If you want to change the scrollbar, then you will need a plugin (JS plugin).

.Container
{
  width: 200px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid black;
}

.Content { width: 300px; }

.Container, .Content
{
  transform:rotateX(180deg);
  -moz-transform:rotateX(180deg); /* Mozilla */
  -webkit-transform:rotateX(180deg); /* Safari and Chrome */
  -ms-transform:rotateX(180deg); /* IE 9+ */
  -o-transform:rotateX(180deg); /* Opera */
}
<div class="Container">
  <div class="Content">
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
  </div>
</div>

Upvotes: 12

Related Questions