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

Question

我有一个用 Ionic 2 封装的 Angular 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-bar-indicator { display: none; }

等...

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

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

Answer 1

您可以覆盖 .scss 文件中的滚动内容样式。

// scroll-content is a class
.scroll-content {
    overflow-y: auto;
}

或者更好的是你可以设置 overflow-y: hidden;

Answer 2

在 ion-content

中使用 overflow-scroll="false"

Answer 3

我正在使用 Ionic 2 rc 0

我的解决方案是在 div 我称为包络的

上使用离子固定属性。

（在 rc 0 中，不能将 ion-fixed 添加到 ion-content）

<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 4

他们有一个 class 并且应该可以使用：

 import { App } from 'ionic-angular';

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

在他们的 CHANGELOG 中查看论坛讨论 here. But it seems to have stopped working after 2.0.0-rc.1 I believe thats related to this，他们将许多属性更改为 classes（即 scroll-content 到 .scroll-content) 并且 app.setScrollDisabled(true); 尚未更新以反映其中的一些更改。

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

所以如果你在 2.0.0-rc.2 或 2.0.0-rc.3 你应该可以为此，请将其添加到您的 .scss

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

并将此 class 添加到您的 ion-content 中，像这样

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

所以现在请注意在 2.0.0-rc.3.

之后的版本中修复此问题

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

这里还有 App 模块可用功能的完整列表（按版本分类）：

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，别无选择，但他们做了很多视图触发函数，比如viewWillUnload）

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

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

我也很喜欢他们的互联网积分，所以如果你觉得这有帮助，请点赞。

Answer 5

在 ionic2 中，我看到 overflow-y 默认设置为滚动，所以在你的 src/app/app.scss 文件中试试这个：

.scroll-content {
   overflow-y: auto !important;
}

这将从每个视图中隐藏滚动条，并在有内容时启用滚动。

Answer 6

如果您只是想隐藏滚动条，而不想禁用滚动本身，那么使用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 class:

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 7

Ionic2 添加了带下划线前缀的 setScrollDisabled。因此，如果您想访问，只需使用可注入变量 app 并尝试设置 this.app._setScrollDisabled(true)。我希望它会起作用。

Answer 8

将此 css 添加到您的样式中，

我从包含滚动条和项目的检查元素中获取了这个class

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

对我有用

Answer 9

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

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

Answer 10

我让它在我的 Ionic5/Angular11 应用程序中完美运行，同时保留滚动事件并使用以下代码隐藏滚动条：

ion-content {
  width: calc(100% + 20px);
  --padding-end: 40px !important;
}

ion-content::part(scroll) {
  margin-right: -20px;
}

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

How can I disable or hide the scrollbar within an Ionic 2 <ion-content>

ionic-framework

ionic2

angular