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">

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

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

Answer 3

离子内容有一个名为＆＃39; 滚动内容的类。

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

<强> app.css ：

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

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

<强> app.css ：

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

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

Answer 4

这适用于离子5：

ion-content {
   --overflow: hidden;
}

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

Answer 5

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

在hello.ts

 import { app } from 'ionic-angular';

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

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

Answer 6

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

 <?=     $this->Form->email("email", [
                'required' => true,
                'label'    => false,
                'id'       => "email",]);
  ?>

我为has-header类添加了一些scss：

<!-- my-page.ts >
<ion-header>.......</ion-header>
<ion-grid class="has-header fixed-content">

</ion-grid>

Answer 7

if iflagri发布在issue和@shaneparsons的评论中指出，使用

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

    Your content here...

  </div>
</ion-content>

解决问题。

希望有所帮助！

Answer 8

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

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

</div>
</ion-content>

Answer 9

令人惊讶的是，no-bounce属性确实对我以前的项目有效，并且没有处理我目前正在进行的新项目。

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

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

Answer 10

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

<块引用>

[scrollY]="false

<ion-content class="ion-padding message-details-page" [scrollEvents]="true"
(ionScrollStart)="logScrollStart()"
(ionScroll)="logScrolling($event)"
(ionScrollEnd)="logScrollEnd()" [scrollY]="false" >

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

Ionic 2 <ion-content>禁用滚动

10 个答案: