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

我有一个用 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;
}

他们有一个类，应该能够使用：

 import { App } from 'ionic-angular';
 constructor(private app: App) {
   app.setScrollDisabled(true);
};

请参阅此处的论坛讨论。但是在 2.0.0-rc.1 之后它似乎已经停止工作，我相信当他们将很多属性更改为类时，这与他们的 CHANGELOG 中与此有关（即 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功能私有（如此处所示）

此外，以下是按版本划分的App模块可用功能的完整列表：

2.0.0-rc.1 （已设置滚动禁用）
2.0.0-rc.2 （已设置滚动禁用）
2.0.0-rc.3 （已设置滚动禁用）
2.0.0-rc.4（无设置滚动禁用，无替代）
2.0.0-rc.5 （仍然没有设置滚动禁用或替代）
2.0.0-rc.6（没有设置滚动禁用，也没有其他选择，但他们做了更多的视图tirgger功能，如viewWillUnload）

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

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

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

在ionic2中，我看到溢出y默认设置为滚动，因此在您的src/app/app.scss文件中尝试以下操作：

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

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

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

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

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

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

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

感谢拉尔森的评论

但是，如果您不想要卷轴，您可能也不需要离子含量本身，例如，在我的状态中，我想直接使用离子网格。

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

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

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

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

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

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

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

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

为我工作

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

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

在离子内容中使用溢出滚动="false"

相关内容

最新更新

热门标签：