使div滚动条始终加载在顶部

时间:2018-12-27 10:36:41

标签: css scrollbar overflow

此div(.navsp)始终在iPhone 6上滚动加载到其底部。如何使其滚动条加载在其顶部?

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

1 个答案:

答案 0 :(得分:1)

使用rotateX(180deg)将滚动条移到顶部。 transform:rotateX(180deg)将滚动条移到div的顶部。这是给您的示例:

.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>