CODEWITHSUNDEEP
cssscrollbaroverflow
Fernando Souza
Fernando Souza

Reputation: 1779

Make a div scroll bar always load on top

this div (.navsp) always loads scrolled to its bottom on iPhone 6. How can I make it load its scroll bar on its top?

.header .navsp {
    padding: 37px 25px;
    opacity: 0;
    overflow-y: scroll;
    position: absolute;
    left: 0;
    top: 80px;
    height: 100vh;
    width: 100%;
    z-index: 98;
}

Upvotes: 0

Views: 407

Answers (1)

Mordecai
Mordecai

Reputation: 1494

Use rotateX(180deg) to move scrollbar on top. The transform:rotateX(180deg) will move the scroll bar to the top of the div. Here is an example for you:

.topScrollbar{
  width: 300px;
  margin: auto;
  border: 1px solid #424953;
  background: #f4f6f9;
  overflow-y: scroll;
  padding: 2%;
  white-space: nowrap
}

.topScrollbar, .content{
  transform:rotateX(180deg);
  -ms-transform:rotateX(180deg);
  -webkit-transform:rotateX(180deg);
}
<div class="topScrollbar">
  <div class="content">
    lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <BR/><BR/><BR/>
    lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
</div>

Upvotes: 1

Related Questions