Ionic 3：如何在顶部修复 ion-list-header 并仅滚动列表项，而不滚动 ion-content？答案

【问题标题】：Ionic 3: How to fix ion-list-header at the top and scroll only list-item, not ion-content?Ionic 3：如何在顶部修复 ion-list-header 并仅滚动列表项，而不滚动 ion-content？
【发布时间】：2018-10-15 14:58:06
【问题描述】：

我在页面上有一个离子列表，我只想滚动列表项，而不是整个离子内容。

这是我的代码：

<ion-content scroll="false" no-padding>
    <ion-list>
        <ion-list-header>Select your Status</ion-list-header>

        <ion-scroll style="width:100%; height:100vh" scrollY="true">
           <ion-item>
               <h2>Available</h2>
           </ion-item>
           <ion-item>
               <h2>Busy</h2>
           </ion-item>
           <ion-item>
               <h2>At school</h2>
           </ion-item>
           <ion-item>
               <h2>At the movies</h2>
           </ion-item>
           <ion-item>
               <h2>At work</h2>
           </ion-item>
           <ion-item>
               <h2>Battery about to die</h2>
           </ion-item>
           <ion-item>
               <h2>Can't talk, text only</h2>
           </ion-item>
           <ion-item>
               <h2>In a meeting</h2>
           </ion-item>
           <ion-item>
               <h2>At the gym</h2>
           </ion-item>
           <ion-item>
               <h2>Sleeping</h2>
           </ion-item>
           <ion-item>
               <h2>Urgent calls only</h2>
           </ion-item>
       </ion-scroll>
    </ion-list>
</ion-content>

我想修复列表标题“选择您的状态”并仅滚动其他列表项，但即使我将 scroll="false" 设置为 ion-content，它也会隐藏列表标题。请帮忙。提前致谢。

【问题讨论】：

您可以尝试将position: sticky; 添加到ion-list-headers CSS。浏览器支持见caniuse。
@Phonolog 试过了，还是不行。
按照@Phonolog 和top: 0px; 的建议，添加position: sticky; 对我有用。

标签： ionic-framework ionic3

【解决方案1】：

在 ion-list-header 标签中添加“sticky”属性。

适用于离子2、离子3、离子4

【讨论】：

我相信你指的是'ion-item-divider'

【解决方案2】：

你可以这样做：

html

<ion-header>
  <ion-list-header>Select your Status</ion-list-header>
</ion-header>

<ion-content scroll="false" no-padding>
  <ion-list>
    <ion-scroll style="width:100%; height:100vh" scrollY="true">
      <ion-item>
        <h2>Available</h2>
      </ion-item>
      ...
    </ion-scroll>
  </ion-list>
</ion-content>

将您的ion-list-header 放在ion-header 内以使其具有粘性

结果：

【讨论】：