离子框架 – 如何禁用或隐藏Ionic 2中的滚动条

发布时间：2020-12-17 07:41:42 所属栏目：安全来源：网络整理

导读：我有一个Angular 2应用程序包裹在Ionic 2中.我使用 ion-tabs,每个选项卡内都是 ion-content.该区域的内容需要滚动,但是Ionic 2添加了一个不希望显示的滚动条.看来,当编译时, ion-content具有 scroll-content注入它我不想要这个行为. 我尝试了许多在Ionic 1中

我有一个Angular 2应用程序包裹在Ionic 2中.我使用< ion-tabs>,每个选项卡内都是< ion-content>.该区域的内容需要滚动,但是Ionic 2添加了一个不希望显示的滚动条.看来,当编译时,< ion-content>具有< scroll-content>注入它我不想要这个行为.

我尝试了许多在Ionic 1中使用的解决方案,但是它们在Ionic 2中不起作用：

>在< ion-content>上设置scroll =“false”
>在< ion-content>上设置scrollbar-y =“false”
>在< ion-content>上设置overflow-scroll =“false”
>在css中设置以下内容：

.scroll杆指示器
{
显示：无;
}

等等…

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

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

他们有一个班级,应该可以使用：

import { App } from 'ionic-angular';

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

看到论坛讨论here.但似乎已经停止工作后2.0.0-rc.1我相信这与this在他们的CHANGELOG相关,当他们改变了很多属性到类(即滚动内容到.scroll内容)和app.setScrollDisabled(true);没有更新以反映其中的一些变化.

如果你使用2.0.0-rc.2或2.0.0-rc.3我不相信< ion-content overflow-scroll =“false”>或<离子含量离子固定>将会从现在开始创建自己的课程. 所以如果你在2.0.0-rc.2或2.0.0-rc.3你应该可以这样做添加到你的.scss

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

并将此类添加到您的离子内容中

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

所以现在只需要注意,这是在2.0.0-rc.3之后的版本上修复的.

UPDATE(2.0.0-rc.6)：看起来他们将App模块setDisableScroll函数设为private(如here所示)

这里还有一个完整的应用程序模块的功能列表：

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

另外我是一个吸盘他们互联网点,所以preeez upvote,如果你发现这有用的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!