如何掩盖弹出窗口左侧的迷你滚动条？答案

【问题标题】：How to mask the mini-scroller bar on the left of a popover?如何掩盖弹出窗口左侧的迷你滚动条？
【发布时间】：2019-09-06 05:12:25
【问题描述】：

在 Ionic 4 上，我有一个弹出窗口，可以从工具栏上的按钮打开（标准代码）。弹出框右侧的项目列表内容上方有一个小型迷你滚动条。

我怎样才能在没有任何副作用的情况下掩盖它？

popover.component.ts：

<ion-content>
  <ion-list class="ion-no-margin ion-no-padding">
    <ion-item>
      <ion-icon slot="end" name="close-circle"></ion-icon>
      <ion-label>Annuler et Fermer</ion-label>
    </ion-item>

    <ion-item>
      <ion-icon slot="end" name="checkmark-circle" color="secondary"></ion-icon>
      <ion-label>Fermer et Sauver</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

popover.component.scss：

ion-list {
  padding-bottom: 10px;
  ion-item {
    ion-label {
      font-size: 0.8em;
    }
  }
}

我已经尝试在弹出框的内容div中添加一个类来设置溢出：隐藏或自动，但是效果不好：滚动条消失但弹出框的内容可以滚动到很长的空白区域。

popover.component.ts：（无滚动类）

<ion-content class="no-scroll">
  <ion-list class="ion-no-margin ion-no-padding">
    <ion-item>
      <ion-icon slot="end" name="close-circle"></ion-icon>
      <ion-label>Annuler et Fermer</ion-label>
    </ion-item>

    <ion-item>
      <ion-icon slot="end" name="checkmark-circle" color="secondary"></ion-icon>
      <ion-label>Fermer et Sauver</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

popover.component.scss：

ion-list {
  padding-bottom: 10px;
  ion-item {
    ion-label {
      font-size: 0.8em;
    }
  }
}
.no-scroll {
  --overflow: hidden; // <-- mask the scroll-bar but show a wide blank zone under the ion-list
}

【问题讨论】：

标签： ionic4 popover

【解决方案1】：

通过在 chrome 开发工具中测试每个属性，在网上阅读了一些内容后，我找到了一个干净的解决方案：

popover.component.ts：

<ion-content class="no-scroll">
  <ion-list class="ion-no-margin ion-no-padding">
    <ion-item color="" class="">
      <ion-icon slot="end" name="close-circle"></ion-icon>
      <ion-label>Annuler et Fermer</ion-label>
    </ion-item>

    <ion-item color="" class="">
      <ion-icon slot="end" name="checkmark-circle" color="secondary"></ion-icon>
      <ion-label>Fermer et Sauver</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

popover.component.scss：

ion-list {
  padding-bottom: 10px;
  ion-item {
    ion-label {
      font-size: 0.8em;
    }
  }
}
.no-scroll {
  --overflow: hidden;  // <-- this mask the scroll-bar but add a side effect

  // Solution is to add: overflow-y: scroll;
  overflow-y: scroll;  // <-- this mask the wide blank zone added under the content
}

如果有人也可以评论或回复以向我解释此行为？

或者提供更好/更清洁的解决方案？

谢谢。

【讨论】：