时间戳

首页 > 解决方案 > Ionic 4：如何在 ion-content 中隐藏 ScrollBar

html - Ionic 4：如何在 ion-content 中隐藏 ScrollBar

问题描述

我试图隐藏 ion-content (Ionic 4) 中的滚动条 ionic 4 上没有 ion-scroll 所以我使用了 ion-content 但我找不到任何 css 属性来隐藏它（其中大多数不是工作）

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

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

我已经尝试过了，但它不适用于离子含量。

标签： htmlcssangularionic-frameworkionic4

解决方案

由于 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;
  }
}

推荐阅读