Ionic te pone muy fácil capturar eventos de las interacciones que el mismo, pero lo que no te pone tan fácil en su documentación es como obtener datos de sus eventos.
Para poder utilizar eventos de scroll en Ionic lo primero es activarlos, para ello debemos agregar la propiedad [scrollEvents]="true" dentro del inicio del tag, en mi caso siempre lo he usado dentro de <ion-content>.
Disponemos luego de 3 eventos para controlar la interacción con el scroll:
- ionScrollStart: Cuando se inicia el movimiento del scroll.
- ionScroll: Cuando se desplaza el scroll.
- ionScrollEnd: Cuando se termina de desplazar el scroll.
Os pongo un ejemplo de como usarlos:
<ion-content
[scrollEvents]="true"
(ionScrollStart)="logScrollStart()"
(ionScroll)="logScrolling($event)"
(ionScrollEnd)="logScrollEnd()">
<h1>Contenido</h1>
</ion-content>
Bien, pues con estos eventos enviamos información a los métodos referidos: logScrollStart(), logScrolling(evento) y logScrollEnd().
El acceso a la información del evento en logScrolling es un poco extraño y no está bien documentado.
Os pongo un ejemplo de como obtener la posición del scroll:
async logScrolling(event) {
const scrollElement = await event.target.getScrollElement();
const scrollHeight = scrollElement.scrollHeight - scrollElement.clientHeight;
const scrollPositionToTop = event.detail.scrollTop;
console.log("Altura de scroll: ", scrollHeight);
console.log("Posición del scroll: ", scrollPositionToTop);
}
Pronto os hablaré de como manejar el scroll desde javascript.
Espero que os sea de utilidad ^_^.
Comentarios