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

Posted 2023-03-06

【中文标题】Ionic 4：如何在 ion-content 中隐藏 ScrollBar

【英文标题】：Ionic 4: how to hide ScrollBar in ion-content

【发布时间】：2019-06-13 11:37:43

【问题描述】：

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

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

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

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

【参考方案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 中也适用于我。 ***.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;