如何在 Ionic 2 <ion-content> 中禁用或隐藏滚动条? [英] How can I disable or hide the scrollbar within an Ionic 2 <ion-content>
问题描述
我有一个包含在 Ionic 2 中的 Angular 2 应用程序.我使用的是
,并且每个选项卡内都有一个
.这个区域的内容需要可以滚动,但是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:
- 在
- 在
- 在
在 css 中设置以下内容:
scroll="false"
scrollbar-y="false"
overflow-scroll="false"
- 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 之后停止工作我相信这与 this 在他们的 CHANGELOG 中,当他们将很多属性更改为类(即-content 到 .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 之后的版本中修复此问题.
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屋!