Ionic 3：如何固定ion-list-header在顶部，仅滚动ion-item而非ion-content？

嘿，我看你想实现只有ion-item区域滚动、整个ion-content保持静止的效果，你的思路方向是对的，但布局结构和高度设置上有点小问题，咱们来调整下，让它完美工作：

问题分析 #

你原来的代码把<ion-scroll>放在<ion-list>内部，但没有合理分配空间，而且直接设置height:100vh会忽略ion-list-header的高度，导致滚动区域要么覆盖头部，要么超出屏幕。咱们用flex布局来自动分配空间，适配不同设备。

解决方案1：使用ion-scroll（Ionic原生组件） #

修改后的代码结构如下，配合CSS实现自适应高度：

<ion-content scroll="false" no-padding class="content-container">
  <ion-list class="status-list">
    <ion-list-header>Select your Status</ion-list-header>
    <!-- 把ion-scroll放在list-header之后，作为list的子元素 -->
    <ion-scroll scrollY="true" class="scrollable-items">
      <ion-item>
        <h2>Available</h2>
      </ion-item>
      <ion-item>
        <h2>Busy</h2>
      </ion-item>
      <ion-item>
        <h2>At school</h2>
      </ion-item>
      <!-- 这里可以添加更多ion-item -->
    </ion-scroll>
  </ion-list>
</ion-content>

对应的CSS样式：

.content-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.status-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0; /* 移除list默认的margin，避免留白 */
}

.scrollable-items {
  flex: 1;
  width: 100%;
}

解决方案2：用原生CSS overflow实现（更简洁） #

如果你不想用ion-scroll，可以直接用div配合overflow-y: auto，效果一样：

<ion-content scroll="false" no-padding class="content-container">
  <ion-list class="status-list">
    <ion-list-header>Select your Status</ion-list-header>
    <div class="scrollable-items">
      <ion-item>
        <h2>Available</h2>
      </ion-item>
      <ion-item>
        <h2>Busy</h2>
      </ion-item>
      <ion-item>
        <h2>At school</h2>
      </ion-item>
      <!-- 更多ion-item -->
    </div>
  </ion-list>
</ion-content>

CSS只需调整scrollable-items的属性：

.scrollable-items {
  flex: 1;
  width: 100%;
  overflow-y: auto;
}

效果说明 #

• ion-content设置scroll="false"后完全静止
• flex布局让ion-list占满整个ion-content的空间
• scrollable-items会自动占据ion-list除了list-header之外的剩余区域，只有这部分会滚动，头部固定在顶部

内容的提问来源于stack exchange，提问作者Shreyas Pednekar