如何在 Ionic 2 <ion-content> 中禁用或隐藏滚动条 [英] How can I disable or hide the scrollbar within an Ionic 2 <ion-content>

问题描述

我有一个封装在 Ionic 2 中的 Angular 2 应用程序.我正在使用 <ion-tabs>，每个选项卡中都有一个 <ion-content>>.这个区域的内容需要是可滚动的，但是 Ionic 2 增加了一个我不想显示的滚动条.看来，在编译时， 有一个 注入其中.我不想要这种行为.

I have an Angular 2 app wrapped in Ionic 2. I'm using <ion-tabs>, and within each tab is an <ion-content>. The content in this area needs to be scrollable, but Ionic 2 adds a scrollbar that I don't want displayed. It appears that, when compiled, an <ion-content> has a <scroll-content> injected into it. I don't want this behavior.

我尝试了许多过去在 Ionic 1 中工作的解决方案，但它们在 Ionic 2 中不起作用:

I have tried many of the solutions that used to work in Ionic 1, but they do not work in Ionic 2:

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

• 在css中设置如下:

• Setting scroll="false" on the <ion-content>
• Setting scrollbar-y="false" on the <ion-content>
• Setting overflow-scroll="false" on the <ion-content>

• Setting the following in css:

.scroll-bar-indicator{显示:无；}

等等……

设置以下内容确实可以删除滚动条，但我宁愿不劫持浏览器行为，而且它还会从 <ion-content> 标签内部的内容中删除滚动条，我不想要.

Setting the following actually does work to remove the scrollbar, but I'd rather not hijack the browser behavior, and also it removes scrollbars from content internal to the <ion-content> tag, which I don't want.

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

推荐答案

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

They have a class for that and should be able to use:

 import { App } from 'ionic-angular';

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

查看论坛讨论此处.但它似乎在 2.0.0-rc.1 之后停止工作我相信这与

See forum discussion here. But it seems to have stopped working after 2.0.0-rc.1 I believe thats related to this in their CHANGELOG when they changed a lot of attributes to classes (i.e. scroll-content to .scroll-content) and the app.setScrollDisabled(true); hasn't been updated to reflect some of those changes.

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

If your using 2.0.0-rc.2 or 2.0.0-rc.3 I don't believe <ion-content overflow-scroll="false"> or <ion-content ion-fixed> will work either so from now create your own class.

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

So if you're on 2.0.0-rc.2 or 2.0.0-rc.3 you should be able to do so by adding this to your .scss

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

并像这样将此类添加到您的 ion-content

and add this class to your ion-content like this

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

因此，现在请注意在 2.0.0-rc.3 之后的版本上修复此问题.

So now just keep an eye out for this being fixed on versions after 2.0.0-rc.3.

UPDATE (2.0.0-rc.6): 看起来他们将 App 模块的 setDisableScroll 函数设为私有(如 这里)

UPDATE (2.0.0-rc.6): It looks like they made the App modules setDisableScroll function private (as seen here)

以下是 App 模块可用功能的完整列表(按版本):

Also here's a full list of the available function for the App module by version:

• 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.4 (no setScrollDisabled, and no alternative)

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

2.0.0-rc.5 (still no setScrollDisabled or alternative)

2.0.0-rc.6 (没有 setScrollDisabled，也别无选择，但他们提供了更多视图触发功能，例如 viewWillUnload)

2.0.0-rc.6 (no setScrollDisabled, and no alternative but they did a a lot more view tirgger functions like viewWillUnload)

所以除非他们把它带回来，否则请继续使用以下内容:

So unless they bring it back keep using the following:

.no-scroll .scroll-content{溢出:隐藏；}

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

另外，我对他们的互联网积分很感兴趣，所以如果你觉得这有帮助，请提前投票.

Also I'm a sucker for them internet points so preeez upvote if you found this helpful.

这篇关于如何在 Ionic 2 <ion-content> 中禁用或隐藏滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！