Как сделать статический ионный список прокручиваемым в ионном?

Question

У меня есть статический список в ионном, и мне нужно прокручивать только часть списка. Я уже попробовал ответ на этот вопрос о переполнении стека, но он не работает для меня.

Это говорит о том, что - если в нашем коде есть тег ion-item, это может вызвать некоторые проблемы для нас. Поэтому обязательно удалите этот тег. Я не знаю, из-за этого ли это. Независимо от того, что я делаю, я могу только прокручивать весь контент или вообще не прокручивать его. Я хочу, чтобы прокручивалась только часть списка, упомянутая ниже.

Вот мой код:

 <ion-content class="calendar-page ">
  <div class="calendar-section" padding>
    <ion-calendar #calendar></ion-calendar>
  </div>


  <div class="reminder-section ">
    <div class="bar bar-header bar-assertive section-title mt-20">
      <h2 class="title" align="center">Reminders</h2>
    </div>

    **//scrollable from here**

    <ion-list>
      <ion-item class="custom-font-size">
        QUIT SMOKING<span item-end>Today, 14:00</span>
        <ion-icon name="alarm" class="alarm-icon-color" item-end></ion-icon>
      </ion-item>


      <ion-item class="custom-font-size">
        GET FIT<span item-end>Today, 18:00</span>
        <ion-icon name="alarm" class="alarm-icon-color" item-end></ion-icon>
      </ion-item>

      <ion-item class="custom-font-size">
        QUIT SMOKING<span item-end>11 MAY 2018, 08:00</span>
        <ion-icon name="alarm" class="alarm-icon-color" item-end></ion-icon>
      </ion-item>
      <ion-item class="custom-font-size">
        QUIT SMOKING<span item-end>10 MAY 2018, 11:00</span>
        <ion-icon name="alarm" class="alarm-icon-color" item-end></ion-icon>
      </ion-item>
      <ion-item class="custom-font-size">
        GET FIT<span item-end>8 MAY 2018, 10:12</span>
        <ion-icon name="alarm" class="alarm-icon-color" item-end></ion-icon>
      </ion-item>
    </ion-list>

    **// scrollable till here**

  </div>
</ion-content>

Я использую ионный 3.

Answer 1

Please try below link for scroll-able list

https://codepen.io/KevinWang15/pen/QNJEXX

Answer 2

Вот лучшее решение, предложенное @NRaghavendra

<ion-scroll scrollY="true" style="height: 200px">
    <ion-list>
      <ion-item class="custom-font-size">
        QUIT SMOKING<span item-end>Today, 14:00</span>
        <ion-icon name="alarm" class="alarm-icon-color" item-end></ion-icon>
      </ion-item>


      <ion-item class="custom-font-size">
        GET FIT<span item-end>Today, 18:00</span>
        <ion-icon name="alarm" class="alarm-icon-color" item-end></ion-icon>
      </ion-item>

      <ion-item class="custom-font-size">
        QUIT SMOKING<span item-end>11 MAY 2018, 08:00</span>
        <ion-icon name="alarm" class="alarm-icon-color" item-end></ion-icon>
      </ion-item>
      <ion-item class="custom-font-size">
        QUIT SMOKING<span item-end>10 MAY 2018, 11:00</span>
        <ion-icon name="alarm" class="alarm-icon-color" item-end></ion-icon>
      </ion-item>
      <ion-item class="custom-font-size">
        GET FIT<span item-end>8 MAY 2018, 10:12</span>
        <ion-icon name="alarm" class="alarm-icon-color" item-end></ion-icon>
      </ion-item>
    </ion-list>
</ion-scroll>