如何在Ionic 2< ion-content>中禁用或隐藏滚动条。 [英] How can I disable or hide the scrollbar within an Ionic 2 <ion-content>
问题描述
我有一个用Ionic 2包装的Angular 2应用程序。我正在使用< ion-tabs> ，并且每个标签内都有一个 <离子含量> 。此区域中的内容需要可滚动，但Ionic 2添加了一个我不想显示的滚动条。看来，在编译时，< ion-content> 注入了< scroll-content> 它。我不想要这种行为。
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; - 在
<上设置scrollbar-y =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
{
display：none;
}
等...
设置以下内容确实可以删除滚动条，但我宁愿不劫持浏览器行为，也会从< ion-内部的内容中删除滚动条内容> 标签，我不想要。
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 之后停止了工作。我认为这与这个在 CHANGELOG 中，当他们将很多属性更改为类时（即<$ c） $ c>滚动内容到 .scroll-content ）和 app.setScrollDisabled（true）; 尚未更新以反映其中一些更改。
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 。
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 ，没有其他选择，但他们做了很多查看tirgger函数，如 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 {
overflow：hidden;
}
.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屋！
