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>