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

【问题标题】：How can I disable or hide the scrollbar within an Ionic 2 <ion-content>如何禁用或隐藏 Ionic 2 <ion-content> 中的滚动条
【发布时间】：2016-03-12 01:11:44
【问题描述】：

我有一个封装在 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;
}

【问题讨论】：

是的，这里也一样...据我所知，离子团队现在似乎没有添加这个选项，所以我认为唯一的方法是像你一样劫持浏览器，但是将其添加到仅在要隐藏滚动条的特定中使用的类中。对不起我的英语。
感谢您的劫持解决方案，它有效，我认为没有理由在我的应用中保留滚动条，因此我更愿意将其永久删除。
你得到这个@vrjr的解决方案了吗？
@Aish123 自从我发布这个问题以来，我没有调查过它，但最终我得出的结论是 Ionic 2 目前无法实现我想要做的事情。 Ionic 2 可能在那时发生了变化，因为它当时处于 alpha 状态的快速开发阶段。
::-webkit-scrollbar, *::-webkit-scrollbar { 显示：无； } 为我工作

标签： ionic-framework angular ionic2

【解决方案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"> 或 <ion-content ion-fixed> 会工作所以从现在开始创建你自己的类。

因此，如果您使用的是 2.0.0-rc.2 或 2.0.0-rc.3，您应该可以通过将其添加到您的.scss

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

并像这样将此类添加到您的ion-content

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

因此，现在请注意在 2.0.0-rc.3 之后的版本上修复此问题。

更新 (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{ 溢出：隐藏； }

另外，我对他们的互联网积分很感兴趣，所以如果你觉得这有帮助，请提前投票。

【讨论】：

是的，你的权利，运行 2.0.0-rc.3 添加自定义类就可以了。谢谢！
@Mohsen 我更新了我的答案。他们完全删除了setScrollDisabled 的样子。
这禁用了滚动和滚动条
感谢您更新此信息，它确实应该被合并到 ionic2 更改日志中。你的 CSS 为我工作。如果这种情况再次发生变化并且您进行更新，我希望得到 SO 的通知。
在 ionic 2 中是 app._setDisableScroll(true);

【解决方案2】：

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

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

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

【讨论】：

我添加了以下 CSS 代码，它禁用了 ion-content 指令的滚动： .scroll-content { overflow-y: hidden !important; }

【解决方案3】：

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

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

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

【讨论】：

感谢您的回答。不幸的是，它不起作用，因为它消除了滚动的能力。我只想删除滚动bar，而不是滚动behavior。
只设置 overflow-y 为 auto ，这只是隐藏但不会禁用功能，试过了，效果很好！

【解决方案4】：

如果您只想隐藏滚动条，而不想禁用滚动本身，请使用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;
        }
    }
}

【讨论】：

同意。 ion-content 描述是关于支持滚动的。 “Content 组件提供了一个易于使用的内容区域，并通过一些有用的方法来控制可滚动区域。单个视图组件中应该只有一个内容。如果需要额外的可滚动元素，请使用 ionScroll。” 因此，如果您不想使用 ion-grid 滚动来代替.

【解决方案5】：

我正在使用 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;
}

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

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

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

为我工作

【讨论】：

谢谢你，为我工作。但 Mozilla Firefox 无法正常工作。

【解决方案9】：

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

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

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

【讨论】：

【解决方案10】：

在 ion-content 中使用 overflow-scroll="false"

【讨论】：