Question

我有问题。划分display: flex和position:fixed; 我想滚动到它的顶部。它适用于iOS移动设备。它在任何浏览器的iOS移动设备中都不起作用。

以下是我的代码示例。

function topScroll() {
  document.getElementsByClassName('content-wrapper').scrollTop = 100;
};

.mobile{
  max-width: 100vw!important;
  min-width: 100vw!important;
  position: relative;
  overflow: hidden!important;
}

.page-wrapper{
  min-height: 100vh;
  max-height: 100vh;
  position: fixed;
  width: 100%;
}

.page-content-wrapper{
   height: 100%;
   max-height: 100vh;
   min-height: 100vh;
}

.content-wrapper{
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.main-content-wrapper .page-content-wrapper .content-wrapper>.session-wrapper-mobile {
    flex: 1 0 auto;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}


.session-wrapper-mobile {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.session-wrapper-mobile .calendar-header-mobile {
    position: fixed;
    width: 100%;
    background-color: #fff;
    z-index: 999;
    border-bottom: 1px solid #dadada;
    height: 111px;
}

.session-wrapper-mobile .calendar-court-mobile {
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    flex: 1 0 auto;
    background-color: #404040;
    margin-top: 110px;
}

.session-wrapper-mobile .calendar-court-mobile .time-board-mobile .time-item-mobile {
    background-color: #404040;
}

.session-wrapper-mobile .calendar-court-mobile .time-board-mobile .time-item-mobile .time-item-container {
    padding-right: 15px;
    min-height: 10px;
    background-color: #404040;
    font-family: Neusa-Medium,Arial,Helvetica,sans-serif;
}

.mobile-col-3 {
    width: 25%;
}

[class*=mobile-col] {
    float: left;
    min-height: 1px;
}

.session-wrapper-mobile .calendar-court-mobile .time-board-mobile .time-item-mobile .blank-mobile {
    background-color: #ebebeb;
    height: 30px;
    border-top: 1px solid #dadada;
}

.mobile-col-9 {
    width: 75%;
}

.mobile-row:after {
    content: "";
    clear: both;
    display: table;
}

.session-wrapper-mobile .calendar-court-mobile .time-board-mobile .time-item-mobile .time-item-container .time-wrapper-mobile {
    text-align: right;
    position: relative;
    top: -11px;
}
.session-wrapper-mobile .calendar-court-mobile .time-board-mobile .time-item-mobile .time-item-container .time-wrapper-mobile {
    text-align: right;
    position: relative;
    top: -11px;
}
.session-wrapper-mobile .calendar-court-mobile .time-board-mobile .time-item-mobile .time-item-container .time-wrapper-mobile .time-mobile {
    font-size: 200%;
    color: #fff;
}

.session-wrapper-mobile .calendar-court-mobile .time-board-mobile .time-item-mobile .time-item-container .time-wrapper-mobile .time-format-mobile {
    font-size: 120%;
    color: #929292;
}

.session-wrapper-mobile .calendar-court-mobile .time-board-mobile .time-item-mobile .time-item-container .time-wrapper-mobile .divider-line-mobile {
    border-top: 1px solid #08cffe;
    width: 5px;
    position: absolute;
    top: 11px;
    right: -15px;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <button type="button" onclick="topScroll()">
      Вверх
      </button>
    <body class="mobile">

      <div class="page-wrapper">
        <div class="page-content-wrapper">
          <div class="content-wrapper">
            <div class="session-wrapper-mobile play-session-mobile">
              <div class="calendar-header-mobile">
                <div class="calendar-court-mobile">
                  <div class="time-board-mobile">
                    <div class="time-board-mobile">
                      <div class="time-item-mobile">
                        <div class="mobile-row">
                          <div class="mobile-col-3 time-item-container">
                            <div class="time-wrapper-mobile">
                              <div class="time-mobile">
                                12:00
                              </div>
                              <div class="time-format-mobile">
                                am
                              </div>
                              <div class="divider-line-mobile">
                              
                              </div>
                            </div>
                          </div>
                          <div class="mobile-col-9 blank-mobile">
                       
                          </div>
                        </div>
                      </div>
                                        <div class="time-item-mobile">
                        <div class="mobile-row">
                          <div class="mobile-col-3 time-item-container">
                            <div class="time-wrapper-mobile">
                              <div class="time-mobile">
                                12:00
                              </div>
                              <div class="time-format-mobile">
                                am
                              </div>
                              <div class="divider-line-mobile">
                              
                              </div>
                            </div>
                          </div>
                          <div class="mobile-col-9 blank-mobile">
                       
                          </div>
                        </div>
                      </div>
                                        <div class="time-item-mobile">
                        <div class="mobile-row">
                          <div class="mobile-col-3 time-item-container">
                            <div class="time-wrapper-mobile">
                              <div class="time-mobile">
                                12:00
                              </div>
                              <div class="time-format-mobile">
                                am
                              </div>
                              <div class="divider-line-mobile">
                              
                              </div>
                            </div>
                          </div>
                          <div class="mobile-col-9 blank-mobile">
                       
                          </div>
                        </div>
                      </div>
                                        <div class="time-item-mobile">
                        <div class="mobile-row">
                          <div class="mobile-col-3 time-item-container">
                            <div class="time-wrapper-mobile">
                              <div class="time-mobile">
                                12:00
                              </div>
                              <div class="time-format-mobile">
                                am
                              </div>
                              <div class="divider-line-mobile">
                              
                              </div>
                            </div>
                          </div>
                          <div class="mobile-col-9 blank-mobile">
                       
                          </div>
                        </div>
                      </div>
                                        <div class="time-item-mobile">
                        <div class="mobile-row">
                          <div class="mobile-col-3 time-item-container">
                            <div class="time-wrapper-mobile">
                              <div class="time-mobile">
                                12:00
                              </div>
                              <div class="time-format-mobile">
                                am
                              </div>
                              <div class="divider-line-mobile">
                              
                              </div>
                            </div>
                          </div>
                          <div class="mobile-col-9 blank-mobile">
                       
                          </div>
                        </div>
                      </div>
                                        <div class="time-item-mobile">
                        <div class="mobile-row">
                          <div class="mobile-col-3 time-item-container">
                            <div class="time-wrapper-mobile">
                              <div class="time-mobile">
                                12:00
                              </div>
                              <div class="time-format-mobile">
                                am
                              </div>
                              <div class="divider-line-mobile">
                              
                              </div>
                            </div>
                          </div>
                          <div class="mobile-col-9 blank-mobile">
                       
                          </div>
                        </div>
                      </div>
                                        <div class="time-item-mobile">
                        <div class="mobile-row">
                          <div class="mobile-col-3 time-item-container">
                            <div class="time-wrapper-mobile">
                              <div class="time-mobile">
                                12:00
                              </div>
                              <div class="time-format-mobile">
                                am
                              </div>
                              <div class="divider-line-mobile">
                              
                              </div>
                            </div>
                          </div>
                          <div class="mobile-col-9 blank-mobile">
                       
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </body>

Answer 1

尝试此操作以使用scrollTop为iOS或其他设备应用正确的选择器。

function topScroll() {
if($.browser.safari) scrollentity = $("body"); 
else scrollentity = $("html");
scrollentity .scrollTop(100)
}

如何让scrollTop在iOS移动设备上运行

1 个答案: