如何屏蔽弹出窗口左侧的迷你滚动条？

Question

在 Ionic 4 上，我有一个弹出窗口 window，我从工具栏上的按钮（标准代码）打开它。一个小的迷你滚动条出现在弹出窗口的右侧，位于项目列表的内容之上。

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

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中添加一个class来设置溢出：隐藏或自动，但效果不佳：滚动条消失但弹出窗口的内容可以滚动到一个很长的空白区域。

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

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

如果有人也可以发表评论或回复给我解释一下这种行为？

或者给出一个better/cleaner的解决方案？

谢谢。

如何屏蔽弹出窗口左侧的迷你滚动条？

How to mask the mini-scroller bar on the left of a popover?

popover

ionic4