jquery - 问题侧面菜单栏

Question

我的侧面菜单栏有问题，因为当应用程序安装在您的手机上时，它不允许在菜单上向下滚动。在模拟器中，它只允许我使用鼠标 bolinha(滚动)进行滚动。我的菜单代码如下:

           <div class="inner-element uib_w_43 uib_sidebar leftbar bar-bg thumb-bg bar-gutter menu-side-bar swipe" data-uib="layout/left_sidebar" data-ver="1" data-anim="{'style':'overlap', 'v':270, 'side':'left', 'dur':500}">

        <div class="sidebar-content content-area ">
            <div class="header-side-menu">
                <img id="imagem-logado">
                <img id="imagemBorda-logado" src="images/borda_foto.png">
                <div class="name-logado">
                    <h10></h10>
                </div>
            </div>
            <!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
            <div class="content-side-menu">
                <div class="contat-titulo-side-menu">Participantes</div>
                <ul>
                    <li class="content-content-side-menu" id="cadPart"> <i class="ion ion-person-add"> </i> Novo participante</li>
                    <li class="content-content-side-menu" id="lsPart"> <i class="ion ion-clipboard"> </i> Lista participantes</li>
                </ul>
            </div>
            <!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
            <div class="content-side-menu">
                <div class="contat-titulo-side-menu">Reuniões</div>
                <ul>
                    <li class="content-content-side-menu" id="cadReu"> <i class="ion ion-plus-circled"> </i> Nova reunião</li>
                    <li class="content-content-side-menu" id="lsReu"> <i class="ion ion-clipboard"> </i> Historico de reuniões</li>
                </ul>
            </div>
            <!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
            <div class="content-side-menu">
                <div class="contat-titulo-side-menu">Sincronismo</div>
                <ul>
                    <li class="content-content-side-menu" id="btnBuscarAtt"> <i class="ion ion-upload"> </i> Buscar atualizações</li>
                    <li class="content-content-side-menu" id="histSincr"> <i class="ion ion-clipboard"> </i> Log</li>
                </ul>
            </div>
            <!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
            <div class="content-side-menu">
                <div class="contat-titulo-side-menu">Opções</div>
                <ul>
                    <li class="content-content-side-menu" id="btn_OPCOES_PROGRAM"> <i class="ion ion-android-settings"> </i> Opções</li>
                    <li class="content-content-side-menu" id="btnRenicializar"> <i class="ion ion-nuclear"> </i> Reinicializar aplicação</li>
                    <li class="content-content-side-menu" id="btnInformacoes"> <i class="ion ion-information-circled"> </i> Sobre</li>
                </ul>
                <ul>
                    <li class="content-content-side-menu" id="btnSair"> <i class="ion ion-log-out"> </i> Sair</li>
                </ul>
            </div>
            <div style="margin-bottom: 80px;"></div>
        </div>
    </div>

这里是我的CSS:

.menu-side-bar {
  position: fixed;
  z-index: 999;
  overflow: auto;

  .header-side-menu{
    text-align: center;
    background-color: rgb(236, 240, 241);
    height: 235px;
    vertical-align: center;
  }
  img#imagem-logado{
   // position: fixed;
    height: 150px;
    //width: 100px;
    //margin-left: 35px;
    margin-top: 53px;
  }
  img#imagemBorda-logado{
    position: relative;
    margin-top: -199px;
    height: 180px;
    //left: 0;
    //border-color: red;
  }
  .name-logado{
    position: relative;
    margin-top: -20px;
    clear: both;
    z-index: 999;
   // float: bottom;
    text-align: center;
    h10{
      font-size: 7vw;
      font-family: Lato;
      color: rgb(127, 140, 141);
     // position: absolute;

    }
  }
  .content-side-menu{
    .contat-titulo-side-menu{
      background-color: rgb(52, 73, 94);
      font-size: 18px;
      text-align: center;
      font-family: TAHOMA;
      color: #ecf0f1;
      height: 25px;
      padding-top: 3px;
    }
    .content-content-side-menu{
      font-family: VERDANA;
      font-size: 17px;
      color: white;
      margin-top: 10px;
      margin-bottom: 10px;
      margin-left: 15px;
      cursor: pointer;
    }
  }

}

我为整个 CSS 服务，但没有遇到任何问题。为什么会这样？

Answer 1

您可以尝试将顶部的代码替换为

.menu-side-bar {
  position: fixed;
  z-index: 999;
  overflow: scroll;

老实说，我很难理解你想要什么。

编辑: 试试这个。

.menu-side-bar {
 overflow-x: auto;
 overflow-y: scroll;
 white-space: nowrap;
 -webkit-overflow-scrolling: touch;