Ionic 2 <ion-content> 禁用滚动答案

【问题标题】：Ionic 2 <ion-content> disable scrollIonic 2 <ion-content> 禁用滚动
【发布时间】：2022-02-01 16:08:41
【问题描述】：

我尝试了几种禁用滚动的方法，包括使用 CSS position: fixed、属性overflow-scroll="false" 等，但所有方法都失败了。

当我向下滑动时，按钮会向上，当我向上滑动时，按钮会向下，就像弹跳效果一样。

我可以知道这个问题的任何解决方案吗？非常感谢。

【问题讨论】：

【解决方案1】：

使用 ionic 3 测试（应该适用于 ionic 2）：

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

【讨论】：

对于任何拥有最新版本 Ionic 的人 - 这是目前最好的答案。见：github.com/ionic-team/ionic/issues/7644
在删除任何高度大于内容的元素后，这也对我有用
来自 Ionic 的 Max，很明显我们需要让这种方式更简单。我们正在内部传递这个问题，以确保我们能够解决这个问题！

【解决方案2】：

我使用 css 解决了同样的问题。（离子 3.6）

Step1：在ion-content添加一个新类：

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

Step2：在您的 CSS 中添加以下代码：

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

【讨论】：

【解决方案3】：

ion-content 有一个名为“scroll-content”的类。

考虑到这一点，转到 app.css，在 src/app 中添加：

app.css：

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

这应该让你的离子内容没有滚动，但我宁愿用户：

app.css：

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

因为这仅在页面内容溢出 ion-content 时才允许滚动内容。

【讨论】：

【解决方案4】：

这适用于离子 5：

ion-content {
   --overflow: hidden;
}

<ion-content scroll-y="false">

【讨论】：

这是在 Ionic 5 上对我有用的解决方案。其他答案均无效。

【解决方案5】：

要禁用 ion-content 中的滚动，可以使用 setScrollDisabled() 方法。您应该按照以下步骤操作。

在 hello.ts 中

 import { app } from 'ionic-angular';

   public class HelloPage
   {
       constructor(private app: App) {};

        ngAfterViewInit(){
        this.app.setScrollDisabled(true);
      }
    }

【讨论】：

非常感谢。但是，如果我想要一页不滚动而不是整个应用不滚动怎么办？
@ReoLim 参考stackoverflow.com/questions/35952538/… .:))
对于较新版本的 ionic2 它是 this.app._setDisableScroll(true);
请将@FrankGoortani 的评论包含在答案中。

【解决方案6】：

如果您不想要滚动，您可能也不需要离子内容本身，例如在我的状态下，我想直接使用离子网格。

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

【讨论】：

【解决方案7】：

如果提供的内容没有插槽，则内容将放置在可滚动区域中。要显示固定内容，请添加slot="fixed"。

<ion-content>
<div slot="fixed">

</div>
</ion-content>

【讨论】：

这应该被标记为答案。在等待从数据库加载数据时使用它来显示不可滚动的骨架文本。

【解决方案8】：

正如 iflagri 在 issue 中发布的那样，@shaneparsons 指出了 cmets，使用

<ion-content padding>
  <div ion-fixed>

    Your content here...

  </div>
</ion-content>

解决问题。

希望对您有所帮助！

【讨论】：

【解决方案9】：

如果您想禁用内容滚动，您可以使用

<ion-content [scrollY]="false" >

https://ionicframework.com/docs/api/content

<ion-content [attr.noScroll]="shouldScroll"></ion-content>
    
// scss file:

[noScroll] {
   overflow: hidden;
}

【讨论】：

【解决方案10】：

令人惊讶的是，no-bounce 属性确实适用于我以前的项目，但不适用于我目前正在从事的新项目。

我用ion-fixed 尝试了@rodrigo-chave 的解决方案。它解决了滚动问题，但使我的内容变小（好像被缩小了）。添加 100% CSS 宽度和高度属性修复了它。

<ion-content no-bounce>
  <div ion-fixed style="height: 100%; width: 100%">
    ...
  </div>
</ion-content>

【讨论】：