如何让Ionic 4 Angular应用中的ion-list始终显示滚动条？

嘿，我来帮你搞定这个滚动条始终显示的问题！Ionic 默认会隐藏滚动条，只有在滚动操作时才临时显示，要让它一直露出来，咱们只需要自定义CSS样式就行，分两种场景给你说明：

场景1：全局修改ion-content的滚动条（所有列表通用） #

如果你的ion-list是放在ion-content里面的，滚动行为其实是由ion-content负责的，直接给ion-content加样式就行。在全局样式文件（比如src/global.scss）或者页面组件的.scss文件里添加以下代码：

ion-content {
  /* 自定义滚动条基础参数 */
  --scrollbar-width: 6px;
  --scrollbar-thumb-color: #888;
  --scrollbar-track-color: #f1f1f1;

  /* Webkit内核浏览器（Chrome、Safari等）的滚动条样式 */
  ::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
  }

  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
    border-radius: 10px; /* 让轨道圆角更美观 */
  }

  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
    border-radius: 10px;
  }

  /* 鼠标悬停时的滑块样式 */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  /* Firefox浏览器的滚动条设置 */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

场景2：仅针对特定ion-list设置滚动条 #

如果你只想让某一个ion-list显示永久滚动条，先给这个列表加个自定义类名：

<ion-list class="persistent-scrollbar">
  <!-- 你的列表项内容 -->
  <ion-item *ngFor="let item of items">
    {{ item.name }}
  </ion-item>
</ion-list>

然后在对应的组件.scss文件里添加样式：

.persistent-scrollbar {
  /* 先确保列表具备滚动能力，需设置高度和溢出属性 */
  height: 400px; /* 根据需求设置合适高度 */
  overflow-y: auto;

  /* Webkit内核样式 */
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  /* Firefox样式 */
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

小提醒 #

• 如果你的ion-list没放在ion-content里，一定要给列表设置固定高度和overflow-y: auto，否则滚动条不会出现。
• 上面的代码覆盖了主流的Webkit和Firefox浏览器，基本能满足日常需求。

内容的提问来源于stack exchange，提问作者gausmohammad shaikh