Odwrócenie położenia paska przewijania w css

02.09.2020
Css Webdev
Komentarze 0
Tweet

W tym wpisie pokażę jak odwrócić położenie paska przewijania diva z pozycji na dole na pozycję na górze.

Stwórzmy najpierw przykładowy plik html. Pierwszy kontener będzie standardowy, w drugim poziomy pasek przewijania będzie na górze.

<h1>Here is the Normal one</h1>
<div class="Container">
    <div class="Content">I'm in Content and I'm very long</div>
</div>

<h1>And here is the Flipped one</h1>
<div class="Container Flipped">
    <div class="Content">I'm in Content and I'm very long</div>
</div>

Tak naprawdę wszystko osiągamy dzięki transformacjom css, a dokładniej obrotowi o 180 stopni. Poniżej cały kod css.

.Container
{
    width: 300px;
    overflow-y: auto;
}
.Content
{
    width: 400px;
}

.Flipped, .Flipped .Content
{
    transform:rotateX(180deg);
    -ms-transform:rotateX(180deg); /* IE 9 */
    -webkit-transform:rotateX(180deg); /* Safari and Chrome */
}