scroll - disable - Ionic 2<ion-content> inhabilita el desplazamiento

no scroll ionic 3

Question

He intentado varios métodos para deshabilitar el desplazamiento, incluido el uso de la posición CSS: corregido, atributo overflow-scroll = "false" y etc., pero todos los métodos fallaron. Cuando deslizo hacia abajo, los botones subirán y mientras deslizo hacia arriba los botones bajarán, como un efecto de rebote. ¿Puedo saber alguna solución a este problema? Muchas muchas gracias.

Answer 1

Como iflagri publicó en este github.com/ionic-team/ionic/issues/7644 y @shaneparsons señaló en los comentarios, usando

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

    Your content here...

  </div>
</ion-content>

Resolver el problema.

Espero que te ayude!

Answer 2

El contenido de iones tiene una clase llamada '' contenido de desplazamiento ''.

Con eso en mente, vaya a su app.css , dentro de src / app y agregue:

app.css :

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

Eso debería dejar tu contenido iónico sin desplazamiento, pero preferiría usuario:

app.css :

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

ya que esto permite el contenido de desplazamiento solo si el contenido de la página desborda el contenido de iones.

Answer 3

Para deshabilitar el desplazamiento en el contenido de iones puede usar el método setScrollDisabled (). Debe seguir los pasos a continuación.

En hola.ts

 import { app } from ''ionic-angular'';

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

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

Answer 4

Probado con iónico 3 (debería funcionar en iónico 2):

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

Answer 5

Resolví el mismo problema usando css. (Ionıc 3.6)

Paso 1 : en ion-content agregar una nueva clase:

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

Paso 2 : En tu CSS agrega el siguiente código:

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

Answer 6

Si no desea el desplazamiento, es posible que tampoco necesite el contenido de iones en sí, en mi estado, por ejemplo, quiero usar la cuadrícula de iones directamente.

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

</ion-grid>

y agregué algunos scss para la clase has-header:

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 7

Sorprendentemente, el atributo no-bounce funcionó en mi proyecto anterior y no está trabajando en un nuevo proyecto en el que estoy trabajando actualmente.

Probé la solución de @ rodrigo-chave con ion-fixed . Resolvió el problema de desplazamiento, pero hizo que mi contenido fuera pequeño (como si se hubiera reducido). Añadiendo propiedades de ancho y alto de CSS al 100% arreglado.

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