离子4：如何在离子内容中隐藏ScrollBar

Question

我试图隐藏离子含量（离子4）中的滚动条，而离子4上没有离子滚动，所以我使用了离子含量，但找不到任何css属性来隐藏它（大多数都不起作用）

我确实要滚动，但我不想看到滚动条

::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
}

我已经尝试过了，但是在离子含量上却无法使用..非常感谢。

Answer 1

由于 Ionic 对 ion-content 使用 shadow DOM，应该禁用 shadow DOM 上的元素滚动，然后使 ion-content 自己滚动，然后隐藏 ion-content 的滚动条。结果的离子含量与隐藏的工作滚动条。需要使用CSS 自定义属性。将样式添加到全局范围。

ion-content {
  // overwrite inline styles
  --offset-bottom: auto!important;
  --overflow: hidden;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}

Answer 2

在 Ionic 4 中，您必须使用以下内容，因为 Ionic 使用 shadow DOM：

global.scss

.no-scroll {
    --overflow: hidden;
}

并在页面中

<ion-content class="no-scroll">

Answer 3

::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}

ion-content {
 --offset-bottom: auto!important;
 --overflow: hidden;
 overflow: auto;
 &::-webkit-scrollbar {
   display: none;
 }
 }