离子2 禁用滚动

Question

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

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

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

Answer 1

用离子3测试（应该对离子2起作用）：

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

Answer 2

我用css解决了同样的问题。 （Ionıc3.6）

第1步：在ion-content中添加一个新类：

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

第2步：在你的CSS中添加以下代码：

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

Answer 3

离子含量有一个叫做“滚动内容”的类。

考虑到这一点，转到你的app.css，在src / app里面添加：

---

app.css：

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

---

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

app.css：

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

因为只有在页面内容溢出离子内容时才允许滚动内容。

Answer 4

对于禁用离心内容滚动，可以使用setScrollDisabled（）方法。您应该按照以下步骤操作。

在hello.ts

 import { app } from 'ionic-angular';

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

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

Answer 5

如果您不想要滚动，您可能也不需要离子含量本身，例如我想要直接使用离子网格。

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

Answer 6

正如iflagri发布在这个issue和@shaneparsons指出的评论中，使用

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

    Your content here...

  </div>
</ion-content>

解决这个问题。

希望它有所帮助！

Answer 7

令人惊讶的是，no-bounce属性确实对我之前的项目起作用，并没有开发我目前正在开发的新项目。

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

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