Ionic 6 如何移除滚动条？旧方法失效求解决方案

亲测以下方法在Ionic 6中可成功隐藏滚动条，分全局和局部两种场景：

全局隐藏所有滚动条 #

在项目根目录的global.scss文件中添加以下CSS代码，对所有页面的滚动容器生效：

/* 隐藏WebKit内核浏览器（Chrome、Safari等）的滚动条 */
::-webkit-scrollbar {
  display: none;
}

/* 覆盖Ionic滚动组件的默认溢出设置 */
ion-content, ion-scroll {
  --overflow: hidden;
}

/* 兼容Firefox浏览器 */
* {
  scrollbar-width: none;
}

仅在特定页面/组件隐藏 #

如果不需要全局隐藏，仅针对单个页面或组件生效的话，在对应页面的.scss文件中写入：

:host {
  ::-webkit-scrollbar {
    display: none;
  }

  ion-content {
    --overflow: hidden;
    scrollbar-width: none;
  }
}

注意事项 #

• 检查项目中是否有其他自定义CSS规则覆盖了上述样式，导致失效
• iOS平台默认可能隐藏滚动条，但如果出现显示的情况，上述样式同样适用
• 安卓平台原生会显示滚动条，必须通过CSS强制隐藏

内容的提问来源于stack exchange，提问作者TEISSIER Nathan