Question

在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
}

Answer 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
}

是否有人也可以发表评论或回复以向我解释此行为？

还是提供更好/更清洁的解决方案？

谢谢。

如何遮盖弹出框左侧的迷你滚动条？

1 个答案: