Ionic framework 如何在Ionic 2中禁用或隐藏滚动条<；离子含量>；

我有一个角度2应用程序包在离子2。我使用的是

，每个选项卡中都有一个

。该区域中的内容需要可滚动，但Ionic 2添加了一个我不希望显示的滚动条。在编译时，

中似乎注入了一个

。我不想要这种行为

我曾尝试过许多在离子1中使用的解决方案，但在离子2中不起作用：

• 在

• 在

• 在

• 在css中设置以下内容：

  。滚动条指示器
  {
  显示：无；
  }

等等

设置以下内容确实可以删除滚动条，但我不希望劫持浏览器行为，而且它可以从

标记内部的内容中删除滚动条，这是我不想要的

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

---

您可以覆盖

.scss

文件中的滚动内容样式

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

---

或者更好的是，您可以设置

overflow-y:hidden
在ion内容中使用overflow scroll=“false”
我正在使用Ionic 2 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;
}

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

（在rc 0中，无法将离子添加到离子内容）


#封套{
宽度：100%；
最小高度：100%；
填充：0；
保证金：0；
身高：100%；
溢出：隐藏；
}
他们有一个这样的类，应该能够使用：

 import { App } from 'ionic-angular';

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

见论坛讨论。但是在2.0.0-rc.1之后，它似乎停止了工作。我相信这与他们在更改日志中的有关，当时他们将许多属性更改为类（即
滚动内容
到
。滚动内容
）和
应用程序setScrollDisabled（true）尚未更新以反映其中一些更改

如果您使用2.0.0-rc.2或2.0.0-rc.3我不相信
或
会起作用，那么从现在开始创建您自己的类

因此，如果您在2.0.0-rc.2或2.0.0-rc.3上，您应该可以通过将其添加到
.scs

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

然后像这样将这个类添加到您的
离子内容中

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


..

因此，现在只需关注2.0.0-rc.3之后的版本


更新（2.0.0-rc.6）：看起来他们将
应用程序
模块
设置禁用滚动功能设置为私有（如图所示）

下面是按版本列出的
应用程序
模块可用功能的完整列表：


（已禁用设置克隆功能）

（已禁用设置克隆功能）

（已禁用设置克隆功能）

（无设置克隆已禁用，且无其他选择）

（仍然没有设置克隆禁用或替代）

（没有setScrollDisabled，也没有其他选择，但他们提供了更多的视图TIRGER功能，如
viewWillUnload
）


因此，除非他们把它带回来，否则请继续使用以下方法：

.没有滚动。滚动内容{
溢出：隐藏；
}

此外，我对他们的互联网积分很着迷，所以如果你觉得这有帮助，请投票。
在ionic2中，我看到overflow-y默认设置为滚动，因此在你的src/app/app.scss文件中，请尝试以下操作：

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

这将从每个视图中隐藏滚动条，并在滚动条包含内容时启用滚动。
如果您只想隐藏滚动条，而不想禁用滚动本身，请使用
无反弹
属性：

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

Ionic2已添加带有下划线前缀的setScrollDisabled。
因此，如果您想访问，只需使用可注入变量app并尝试设置this.app.\u setScrollDisabled（true）。我希望它能起作用。
将此css添加到您的样式中

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

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

为我工作
将此添加到config.xml中对我工作

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


是的，这里也一样。。。据我所知，爱奥尼亚团队目前似乎没有添加此选项，因此我认为唯一的方法是像您那样劫持浏览器，但将其添加到一个类中，该类仅用于您想要隐藏滚动条的特定区域。抱歉我的英语。谢谢你的劫持解决方案，它很有效，我不认为有理由在我的应用程序中保留滚动条，所以我更愿意永久删除它。你得到这个@vrjr@Aish123的解决方案了吗？自从我发布这个问题以来，我一直没有研究过它，但最终我得出结论，我想做的是目前不可能与离子2。离子2的情况可能已经发生了变化，因为它当时处于阿尔法状态的快速发展中。：：-webkit scrollbar，*：：-webkit scrollbar{display:none；}为您的答案为甲烷库工作。不幸的是，它不工作，因为它删除了滚动的功能。我只想删除滚动条，而不是滚动行为。将only overflow-y设置为auto，这只会隐藏但不会禁用功能，尝试过后，效果非常好！是的，您的权利，运行2.0.0-rc.3添加自定义类完成了任务。谢谢@我更新了我的答案。他们删除了
setScrollDisabled
的外观。这将禁用滚动和滚动条。感谢您更新此信息，它确实应该被合并到ionic2变更日志中。你的CSS正在为我工作。我希望收到SO的通知，如果此更改再次发生，并且您进行了更新。在ionic 2中，它是应用程序。\u setDisableScroll（true）；同意。
ion内容
的描述都是关于对滚动的支持。“内容组件提供了易于使用的内容
ion-scroll.scroll-y .scroll-content::-webkit-scrollbar{
  display: none;
}

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