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

Question

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

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

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

我已经尝试过了，但是它在离子含量方面不起作用。 非常感谢。

Answer 1

::-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;
    }

Answer 2

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

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

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

Answer 3

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

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

Answer 4

谢谢@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个不需要滚动的页面文件中！

Answer 5

由于Ionic将阴影DOM用于离子含量，因此应禁用阴影DOM上的元素滚动，然后将离子含量设为自己的滚动，然后隐藏滚动条以获取离子含量。隐藏的工作滚动条可显示结果的离子含量。 需要使用CSS Custom Properties。将样式添加到全局范围。

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

Answer 6

这是黑客吗？ 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>

Answer 7

<ion-content>是具有Shadom DOM的自定义元素。有一种叫做::part pseudo element的东西可以瞄准Shadom DOM元素中的一个元素。 如果您查看影子dom，您将看到：

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

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

已在iOS和Android上成功进行了测试。我无法在Chrome上正常运行。

Answer 8

我相信您可以使用 slot="fixed" 使元素固定，因此默认情况下会删除滚动条。

引用 ionic documentation

Answer 9

我找不到使用前面提到的方法执行此操作的可靠方法，它们要么无效，要么停止了全部滚动。我的方法是使离子含量窗口宽于屏幕。

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

Answer 10

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

首先，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");
    
  }

Answer 11

试试这个，到目前为止似乎工作正常，同时保留了 Ionic 5 中的所有功能。

// variables.scss

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

Answer 12

在Ionic 4中，您必须使用以下命令，因为Ionic使用阴影DOM：

global.scss

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

和页面中

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