如何在Ionic 2 <ion-content>中禁用或隐藏滚动条

Question

我有一个Angular 2应用程序包裹在Ionic 2.我正在使用<ion-tabs>,并在每个选项卡中是一个<ion-content>.此区域中的内容需要可滚动,但Ionic 2添加了一个我不想显示的滚动条.似乎在编译时,<ion-content>有一个<scroll-content>注入其中.我不想要这种行为.

我曾尝试过许多以前在Ionic 1中工作的解决方案,但它们在Ionic 2中不起作用:

• 设置scroll="false"在<ion-content>
• 设置scrollbar-y="false"在<ion-content>
• 设置overflow-scroll="false"在<ion-content>

• 在css中设置以下内容:

  .scroll-bar-indicator { display: none; }

等等...

设置以下内容实际上可以删除滚动条,但我宁愿不劫持浏览器行为,也会从<ion-content>标签内部的内容中删除滚动条,这是我不想要的.

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

Answer 1

他们有一个类,应该可以使用:

 import { App } from 'ionic-angular';

 constructor(private app: App) {
   app.setScrollDisabled(true);
};

在此处查看论坛讨论.但它似乎已停止工作后2.0.0 RC.1我相信有关,多数民众赞成这在他们的更新日志时,他们改变了许多属性类(即scroll-content到.scroll-content)和app.setScrollDisabled(true);尚未更新,以反映一些变化.

如果您使用的是2.0.0-rc.2或2.0.0-rc.3我不相信<ion-content overflow-scroll="false">或<ion-content ion-fixed>将会从现在开始创建您自己的类.

因此,如果您使用的是2.0.0-rc.2或2.0.0-rc.3,您应该可以通过将此添加到您的.scss

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

并将此类添加到ion-content此类

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

所以现在请注意在2.0.0-rc.3之后修复版本.

UPDATE(2.0.0-rc.6):它看起来像他们所做的App模块setDisableScroll功能私有的(看到这里)

此处还有App按版本列出的模块可用功能的完整列表:

• 2.0.0-rc.1(已设置setScrollDisabled)

• 2.0.0-rc.2(已设置setScrollDisabled)

• 2.0.0-rc.3(已设置setScrollDisabled)

• 2.0.0-rc.4(没有setScrollDisabled,也没有其他选择)

• 2.0.0-rc.5(仍然没有setScrollDisabled或替代)

• 2.0.0-rc.6(没有setScrollDisabled,没有其他选择,但他们做了很多视图tirgger函数之类的viewWillUnload)

因此,除非他们带回来继续使用以下内容:

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

我也是他们互联网点的傻瓜,所以如果你觉得这很有帮助,请提供赞成.

Answer 2

在ionic2中,我看到overflow-y默认设置为滚动,所以在你的src/app/app.scss文件中试试这个:

.scroll-content {
   overflow-y: auto !important;
}

这将隐藏每个视图的滚动条,并在有内容时启用滚动.

Answer 3

您可以覆盖文件中的滚动内容样式.scss.

// scroll-content is a class
.scroll-content {
    overflow-y: auto;
}

或者更好的是你可以设置 overflow-y: hidden;