Ionic 3.20.0平板端滚动条不显示问题咨询

首先，咱们先理清楚问题根源：你给ion-content设置了overflow:hidden来禁用整体滚动，然后在ion-card里做了自定义的滚动列表，但平板的webkit内核浏览器（比如Chrome、Safari）默认会隐藏非原生滚动容器的滚动条，再加上如果你的自定义滚动容器没有明确的高度限制，也可能导致滚动条不触发。

试试下面这几个步骤来解决：

• 给自定义滚动容器设置明确的高度和滚动属性
  首先确保你那个可滚动的行列表div有固定的高度（或者最大高度），这样容器才会出现滚动。比如给它加个类名scrollable-list，然后在样式里写：

  .scrollable-list {
    // 根据你的.search-card高度调整，确保容器有剩余空间来滚动
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    // 可选：添加上下内边距避免内容贴边
    padding: 0 10px;
  }
  

  这里的calc(100vh - 180px)是减去顶部.search-card的高度，你可以根据实际布局调整数值。

• 强制显示webkit内核的滚动条
  平板上的浏览器大多是webkit内核，默认会隐藏自定义滚动容器的滚动条，咱们可以通过CSS来强制显示并美化它：

  .scrollable-list::-webkit-scrollbar {
    width: 7px; // 设置滚动条宽度
  }
  
  .scrollable-list::-webkit-scrollbar-track {
    background: #f5f5f5; // 滚动条轨道背景色
    border-radius: 4px;
  }
  
  .scrollable-list::-webkit-scrollbar-thumb {
    background-color: #ccc; // 滚动条滑块颜色
    border-radius: 4px;
  }
  
  .scrollable-list::-webkit-scrollbar-thumb:hover {
    background-color: #999; // 鼠标hover时的滑块颜色
  }
  

• 优化ion-content的禁用滚动方式（可选但推荐）
  你现在用overflow:hidden禁用ion-content滚动，其实更符合Ionic规范的方式是用组件自带的scrollEnabled属性，在模板里这样写：

  <ion-content [scrollEnabled]="false">
    <!-- 你的ion-card内容 -->
  </ion-content>
  

  这种方式不会破坏Ionic内部的布局逻辑，能避免一些潜在的适配问题（比如键盘弹出时的内容偏移）。

按照上面的步骤调整后，平板上的滚动条应该就能正常显示了，你可以根据自己的UI风格调整滚动条的样式参数~

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