Tengo una aplicación Angular 2 envuelta en Ionic 2. Estoy usando <ion-tabs> , y dentro de cada pestaña hay un <ion-content> . El contenido de esta área debe ser desplazable, pero Ionic 2 agrega una barra de desplazamiento que no quiero que se muestre. Parece que, cuando se compila, un <ion-content> tiene un <scroll-content> inyectado. No quiero este comportamiento.
He probado muchas de las soluciones que solían funcionar en Ionic 1, pero no funcionan en Ionic 2:
scroll="false" en <ion-content>scrollbar-y="false" en <ion-content>overflow-scroll="false" en <ion-content>Configurando lo siguiente en css:
.scroll-bar-indicator { display: none; }
etc...
Configurar lo siguiente realmente funciona para eliminar la barra de desplazamiento, pero prefiero no secuestrar el comportamiento del navegador, y también elimina las barras de desplazamiento del contenido interno de la etiqueta <ion-content> , que no quiero.
::-webkit-scrollbar, *::-webkit-scrollbar { display: none; }Tienen una clase para eso y deberían poder usar:
import { App } from 'ionic-angular'; constructor(private app: App) { app.setScrollDisabled(true); }; Vea la discusión del foro aquí . Pero parece haber dejado de funcionar después de 2.0.0-rc.1 Creo que eso está relacionado con esto en su REGISTRO DE CAMBIOS cuando cambiaron muchos atributos a las clases (es decir, contenido de scroll-content a .scroll-content ) y app.setScrollDisabled(true); no se ha actualizado para reflejar algunos de esos cambios.
Si está usando 2.0.0-rc.2 o 2.0.0-rc.3 , no creo que <ion-content overflow-scroll="false"> o <ion-content ion-fixed> funcionen a partir de ahora crea tu propia clase.
Entonces, si está en 2.0.0-rc.2 o 2.0.0-rc.3 , debería poder hacerlo agregando esto a su .scss
.no-scroll .scroll-content{ overflow: hidden; } y agregue esta clase a su ion-content como este
<ion-content class="no-scroll"> .. </ion-content>Así que ahora esté atento a que esto se solucione en las versiones posteriores a 2.0.0-rc.3 .
ACTUALIZACIÓN (2.0.0-rc.6): parece que hicieron que la función setDisableScroll de los módulos de la App sea privada (como se ve aquí )
También aquí hay una lista completa de la función disponible para el módulo de la App por versión:
2.0.0-rc.1 (tiene setScrollDisabled )
2.0.0-rc.2 (tiene setScrollDisabled )
2.0.0-rc.3 (tiene setScrollDisabled )
2.0.0-rc.4 (sin setScrollDisabled y sin alternativa)
2.0.0-rc.5 (aún sin setScrollDisabled o alternativa)
2.0.0-rc.6 (sin setScrollDisabled , y sin alternativa, pero hicieron muchas más funciones de activación de vista como viewWillUnload )
Entonces, a menos que lo traigan de vuelta, siga usando lo siguiente:
.no-scroll .scroll-content{ desbordamiento: oculto; }
También me encantan los puntos de Internet, así que vota a favor si te resultó útil.
En ionic2 vi que overflow-y está configurado para desplazarse de forma predeterminada, así que en su archivo src/app/app.scss intente esto:
.scroll-content { overflow-y: auto !important; }Esto ocultará la barra de desplazamiento de todas las vistas y también habilitará el desplazamiento cuando tenga contenido.
Puede anular el estilo de contenido de desplazamiento en su archivo .scss .
// scroll-content is a class .scroll-content { overflow-y: auto; } o mejor aún, puede configurar overflow-y: hidden;