Question

我有一个用Ionic 2包装的Angular 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);
};

参见论坛讨论here。但它似乎在 2.0.0-rc.1 之后停止了工作。我认为当他们将 CHANGELOG 中的this更改为将很多属性更改为类（即scroll-content到.scroll-content）和app.setScrollDisabled(true);尚未更新，以反映其中的一些更改。

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

因此，如果您使用 2.0.0-rc.2 或 2.0.0-rc.3 ，您应该可以通过添加此功能来实现到你的<ion-content ion-fixed>

.scss

并将此课程添加到.no-scroll .scroll-content{ overflow: hidden; }这样的

ion-content

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

UPDATE（2.0.0-rc.6）：看起来他们将<ion-content class="no-scroll"> .. </ion-content>模块App函数设为私有（如here所示）< / p>

此处还有setDisableScroll模块的可用功能的完整列表：

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函数，例如App）

因此，除非他们将其恢复，否则请继续使用以下内容：

.no-scroll .scroll-content { 溢出：隐藏; }

另外，对于他们来说，我是一个傻瓜互联网点，所以如果你觉得这很有帮助，那就预订吧。

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;

Answer 4

我正在使用Ionic 2 rc 0

我的解决方案是在div上使用离子固定属性，称为信封。

（在rc 0中，你不能将离子固定添加到离子含量中）

<ion-content>
  <div id='envelope' ion-fixed>
  </div>
</ionic-content>

#envelope{
  width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

Answer 5

如果您只想隐藏滚动条，并且不想禁用滚动本身，请使用no-bounce attr：

<ion-content no-bounce></ion-content>

感谢larssn for his comment

但如果你不想要滚动，你可能也不需要离子内容本身，例如我想要直接使用离子网格

<!-- my-page.ts >
<ion-header>.......</ion-header>
<ion-grid class="has-header fixed-content">

</ion-grid>

我为has-header类添加了一些scss：

ion-app {
    &.md {
        .has-header {
            margin-top: $toolbar-md-height;
        }
    }
    &.wp {
        .has-header {
            margin-top: $toolbar-wp-height;
        }
    }
    &.ios {
        .has-header {
            margin-top: $toolbar-ios-height;
        }
    }
}

Answer 6

在config.xml中添加它对我有用。

<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />

Answer 7

Ionic2添加了带下划线前缀的setScrollDisabled。因此，如果您想访问只是使用可注入变量应用程序并尝试设置this.app._setScrollDisabled（true）。我希望它可以工作。

Answer 8

将此css添加到您的样式中

我从inspect元素中获取了这个类，其中包含滚动条和项目

ion-scroll.scroll-y .scroll-content::-webkit-scrollbar{
  display: none;
}

为我工作

Answer 9

使用overflow-scroll =＆＃34; false＆＃34;在离子含量

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

9 个答案: