列表不滾動垂直

Question

我有一個離子裏面的內容下面的列表：

<ul class="list"> 
      <li class="item" ng-repeat="doctor in doctors" ng-click="displayDetailsFor(doctor)"> 
      <div class="dr-info-wrapper"> 
       <img src="img/icons/ic_persona.png"> 
       <section class="dr-info"> 
       <h3>{{doctor.name}}</h3> 
       <h4 class="institution">{{doctor.institutions[0].name}}</h4> 
       <h4 class="address">{{doctor.institutions[0].address}}</h4> 
       <h4 class="telephone">Telefono {{doctor.institutions[0].telephone}}</h4> 
       </section> 
       <span class="ion-ios-information-outline info-icon"></span> 
      </div> 
      </li> 
     </ul> 

我只需要一個列表中滾動，因爲我有這裏面我需要他們同其他元素靜態/固定（不滾動）。這是視圖的外觀現在：

紅色部分不能移動/不滾動的藍色部分是我想與滾動的一部分，感謝您的幫助！

爲以防萬一完整的HTML代碼是：

<ion-view id="doctors" view-title="Directorio médico" ng-controller="DoctorsDirController"> 
    <ion-content class="content-dir-medico" scroll="false"> 
    <div class="top-wrapper"> 
     <section class="section-for-bg-img"></section> 
     <div class="dir-medico-grid-bg-img"></div> 
     <section ng-class="blurOptionsWrapper ? 'options-wrapper-blurred' : 'options-wrapper'"> 
     <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
            CITIES FIELD 
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> 
     <div class="all-suboption"> 
      <div class="description-and-dropdown-wrapper first"> 
      <h4 ng-class="cityClicked ? 'mark-used' : 'mark-unused'">{{cityName}}</h4> 

      <div class="buttons"> 
       <button class="button button-icon ion-ios-arrow-down" ng-disabled="blurOptionsWrapper" 
         ng-click="citiesPopover.show($event)"> 
       <script id="popoverCities.html" type="text/ng-template"> 
        <ion-popover-view> 
        <ion-content> 
         <div class="list"> 
         <ul> 
          <li class="item" ng-repeat="city in cities | orderBy: 'id'" ng-click="cityClick(city)"> 
          {{city.name}} 
          </li> 
         </ul> 
         </div> 
        </ion-content> 
        </ion-popover-view> 
       </script> 
       </button> 
      </div> 
      </div> 
     </div> 
     <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
           SPECIALTIES FIELD 
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> 
     <div ng-class="disableSpecialty ? 'disabled-suboption' : 'suboption'" class="all-suboption"> 
      <div class="description-and-dropdown-wrapper"> 
      <h4 ng-class="specialtyClicked ? 'mark-used' : 'mark-unused'">{{specialtyName}}</h4> 

      <div class="buttons"> 
       <button class="button button-icon ion-ios-arrow-down" 
         ng-disabled="disableSpecialty || blurOptionsWrapper" 
         ng-click="specialtiesPopover.show($event)"> 
       <script id="popoverSpecialties.html" type="text/ng-template"> 
        <ion-popover-view> 
        <ion-content> 
         <div class="list"> 
         <ul> 
          <li class="item" ng-repeat="specialty in specialties | orderBy: 'label'" 
           ng-click="specialtyClick(specialty)"> 
          {{specialty.name}} 
          </li> 
         </ul> 
         </div> 
        </ion-content> 
        </ion-popover-view> 
       </script> 
       </button> 
      </div> 
      </div> 
     </div> 
     <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
           INSTITUTIONS FIELD 
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> 
     <div ng-class="disableInstitutions ? 'disabled-suboption' : 'suboption'" class="all-suboption"> 
      <div class="description-and-dropdown-wrapper last"> 
      <h4 ng-class="institutionClicked ? 'mark-used' : 'mark-unused'">{{institutionName}}</h4> 

      <div class="buttons"> 
       <button class="button button-icon ion-ios-arrow-down" 
         ng-disabled="disableInstitutions || blurOptionsWrapper" 
         ng-click="institutionsPopover.show($event)"> 
       <script id="popoverInstitutions.html" type="text/ng-template"> 
        <ion-popover-view> 
        <ion-content> 
         <div class="list"> 
         <ul> 
          <li class="item" ng-repeat="institution in institutions | orderBy: 'name' | unique: 'name'" 
           ng-click="institutionClick(institution)"> 
          {{institution.name}} 
          </li> 
         </ul> 
         </div> 
        </ion-content> 
        </ion-popover-view> 
       </script> 
       </button> 
      </div> 
      </div> 
     </div> 
     </section> 

    </div> 
    <section class="search-instructions" ng-hide="hideSearchInstructions"> 
     <img src="img/icons/ic_lupaesfera.png" class="search-icon"> 
     <h4>Comienza buscando </br>por ciudad y especialidad</h4> 
    </section> 
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
      RESULTS SHOW ALL DOCTORS, BASED ON CITY & SPECIALTY 
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> 
    <section class="results-area" ng-hide="hideDoctorsResults"> 
     <div class="filter-results-info"> 
     <h5>{{doctors.length}} resultados</h5> 
     <h6>Filtra resultados seleccionando una institución</h6> 
     </div> 
     <ul class="list"> 
      <li class="item" ng-repeat="doctor in doctors" ng-click="displayDetailsFor(doctor)"> 
      <div class="dr-info-wrapper"> 
       <img src="img/icons/ic_persona.png"> 
       <section class="dr-info"> 
       <h3>{{doctor.name}}</h3> 
       <h4 class="institution">{{doctor.institutions[0].name}}</h4> 
       <h4 class="address">{{doctor.institutions[0].address}}</h4> 
       <h4 class="telephone">Telefono {{doctor.institutions[0].telephone}}</h4> 
       </section> 
       <span class="ion-ios-information-outline info-icon"></span> 
      </div> 
      </li> 
     </ul> 
    </section> 

Answer 1

我只是用另一種離子含量覆蓋<ul class="list">，它解決了我的問題