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

【问题标题】：Ionic 4: how to hide ScrollBar in ion-contentIonic 4：如何在 ion-content 中隐藏 ScrollBar
【发布时间】：2019-06-13 11:37:43
【问题描述】：

我正在尝试隐藏 ion-content (Ionic 4) 中的滚动条 ionic 4 上没有离子滚动，所以我使用了 ion-content 但我找不到任何 css 属性来隐藏它（大多数都不起作用）

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

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

我已经尝试过了，但它在 ion-content 中不起作用。

【问题讨论】：

标签： html css angular ionic-framework ionic4

【解决方案1】：

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

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

【讨论】：

你应该添加“scrollbar-width: none;”对于 Firefox :)
当然，如果是firefox就对了。我猜对于 android 和 ios 使用的 WebView 组件是基于 Chromium 的。这就是为什么它可以被错过。
此解决方案隐藏了滚动条，但阻止了 scrollToTop 和 scrollToBottom 函数停止为我工作。你也一样吗？
它还会阻止无限滚动；(

【解决方案2】：

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

global.scss

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

在页面中

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

【讨论】：

这也禁用滚动，它不只是隐藏滚动条。
这非常有效！而且我也看不到任何滚动条...我在 ionic 4 中为此花了几个小时，因为以前版本的所有滚动属性都已弃用。谢谢！

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

ion-content {
  overflow: hidden;
  --overflow: hidden;
}

.scroll-content {
  overflow: hidden;
}
  ion-infinite-scroll.md.infinite-scroll-enabled.hydrated {
      overflow: scroll!important;
      height: 100%!important;
    }

【讨论】：

请在您的回答中添加一些解释。

【解决方案5】：

<ion-content> 是一个带有 shadom DOM 的自定义元素。有一种叫做::part pseudo element 的东西可以定位到 shadom DOM 元素中的一个元素。如果你查看 shadow dom，你会看到：

注意part="scroll"。 Ionic 确实将parts 添加到他们的元素中，我们可以通过::part 伪元素使用这些元素来定位它并应用我们的自定义css 来隐藏滚动条：

ion-content::part(scroll)::-webkit-scrollbar {
   display: none;
}

在 iOS 和 Android 上测试成功。不过，我无法让它在 Chrome 上运行。

【讨论】：

这在 Chrome 中也适用于我。 stackoverflow.com/a/59838653/1603234

【解决方案6】：

试试这个，目前看来工作正常，同时保留了 Ionic 5 中的所有功能。

// variables.scss

ion-content {
  width: calc(100% + 15px);
}
ion-content::part(scroll) {
  padding-right: 15px;
}

【讨论】：

【解决方案7】：

谢谢@rostislav

WebStorm 甚至没有建议您的解决方案并在警告的含义中画黄色下划线，但是为我工作并且工作，这太棒了:)

解决方案：将这些行添加到global.scss 和variables.scss：


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

ion-content {
  overflow: hidden;
  --overflow: hidden;
}

.scroll-content {
  overflow: hidden;
}

注意：然后清除浏览器缓存并刷新页面，太好了！

但不要忘记所有页面都禁用了滚动，将此代码添加到不需要滚动的页面的 .sccs 文件中！

【讨论】：

【解决方案8】：

重构了@Sergey Oleynikov 解决方案，它对我来说非常有效

ion-content {
  // overwrite inline styles
  // --offset-bottom: auto !important; 
  --overflow: hidden;
  overflow: auto;

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

【讨论】：

【解决方案9】：

这是一个黑客？ https://github.com/ionic-team/ionic/issues/17685

<ion-content>
<div style="background-color: #f2f2f2 !important; height: 100vh; overflow: auto;">
# content here
</div>
</ion-content>

【讨论】：

这种“hack”仅在您不使用离子头或任何其他离子内容之外的东西时有效。

【解决方案10】：

我相信你可以使用 slot="fixed" 使元素固定，从而默认为您删除滚动条。

参考 ionic documentation

【讨论】：

【解决方案11】：

我找不到使用前面提到的方法的可靠方法，它们要么不起作用，要么一起停止滚动。我的方法是让离子含量窗口比屏幕更宽。

.noscroller {
  left: -10px;
  width: calc(100% + 20px);
}

【讨论】：

【解决方案12】：

如果你想动态移除滚动。您可以使用在<ion-content></ion-content> 内的<main class="inner-scroll scroll-y"></main> 处从shadowDOM 中删除scroll-y 类的方法。

首先，import { Renderer2 } from '@angular/core' 在您的constructor(renderer: Renderer2) 中

要实现这一点，请在您的 your-component.component.ts 中的事件周期 ngAfterViewInit 或之后。

这将从您的应用中激活的页面中移除滚动。

 for(let el of  Array.from(document.querySelectorAll(".ion-page:not(.ion-page-hidden) ion-content")))
  {
    this.renderer.removeClass(el.shadowRoot.querySelector("main[part=scroll]"), "scroll-y");
    
  }

这将从您的应用中激活的页面添加滚动。

for(let el of  Array.from(document.querySelectorAll(".ion-page:not(.ion-page-hidden) ion-content")))
  {
    this.renderer.addClass(el.shadowRoot.querySelector("main[part=scroll]"), "scroll-y");
    
  }

【讨论】：

【解决方案13】：

来自 spicemix 的代码有效！我将代码粘贴到 global.scss 而不是 variables.scss

/* global.scss */
ion-content {
  width: calc(100% + 15px);
}
ion-content::part(scroll) {
  padding-right: 15px;
}

【讨论】：

【解决方案14】：

我已经确认以下解决方案在 Ionic 5 中有效，尽管我相信这也应该在 Ionic 4 中有效。

正如这里的其他人所指出的，控制 ion-content 组件内内容滚动的滚动条存在于其中的影子 DOM 中，因此您需要使用 ::part() CSS 伪元素来定位滚动条。

在您的全局样式表中添加以下 css 声明，这将隐藏滚动条，同时保留滚动功能：

/* chrome, safari */
ion-content::part(scroll)::-webkit-scrollbar {
  display: none;
}
/* firefox */
ion-content::part(scroll) {
  scrollbar-width: none;
}

【讨论】：