Le scroll dans le développement mobile : ce que c’est, techniques de défilement et implémentation

Qu’est-ce que le scroll dans les applications mobiles ?

Scroll est un mécanisme interactif permettant de déplacer la zone visible du contenu dans la fenêtre d’affichage d’un appareil mobile. L’utilisateur glisse son doigt sur l’écran et le contenu se déplace dans la direction du geste, révélant les parties cachées de l’interface. Le défilement est un modèle d’interaction fondamental : selon une étude du Nielsen Norman Group (2023), 78 % du temps passé dans les applications mobiles est consacré au défilement du contenu.

Dans le développement mobile, le défilement est implémenté via des composants spécialisés : ScrollView sur iOS et RecyclerView sur Android. Ces composants ne gèrent pas seulement les touches, mais aussi la réutilisation des éléments, l’animation et l’inertie. Le développeur n’a qu’à placer les vues enfants dans le conteneur, tandis que toute la mécanique de défilement est prise en charge par la plateforme.

Selon Google I/O 2024, les implémentations modernes du scroll utilisent la composition de gestes : le système détermine la direction du glissement, la vitesse et l’accélération du doigt, puis applique un modèle physique pour une décélération en douceur. L’inertie du scroll est calculée sur la base d’un coefficient de friction qui diffère selon les plateformes : iOS utilise Quadratic easing, Android utilise une interpolation basée sur Spline.

Types de scroll dans le développement mobile

Défilement vertical : le type de scroll le plus courant, utilisé dans les fils d’actualités, les listes de chat et les profils. Tout le contenu est organisé de haut en bas et l’utilisateur glisse vers le haut ou le bas pour naviguer. Le défilement vertical est intuitif et pris en charge par défaut sur toutes les plateformes mobiles.

Défilement horizontal : utilisé pour les carrousels, les galeries d’images et les onglets de catégories. Sur iOS, on utilise UICollectionView avec une disposition horizontale ; sur Android, HorizontalScrollView ou RecyclerView avec LinearLayoutManager.HORIZONTAL. Le défilement horizontal nécessite une utilisation prudente car il entre en conflit avec les gestes système « retour » et le changement d’applications.

Scroll infini : technique de chargement des données à mesure que l’utilisateur approche de la fin d’une liste. Lorsque le dernier élément est affiché, l’application demande automatiquement le lot de données suivant au serveur. Selon UX Collective (2025), le Infinite Scroll augmente l’engagement de 40 % pour les applications de contenu, mais réduit la conversion pour le e-commerce en raison de la difficulté à naviguer vers le pied de page.

Défilement parallaxe : crée un effet de profondeur : la couche d’arrière-plan se déplace plus lentement que le premier plan pendant le défilement. Cette technique est souvent utilisée dans les pages d’atterrissage et les profils pour un impact visuel. L’implémentation nécessite la superposition de plusieurs couches avec différents coefficients de vitesse : sur iOS, cela se fait via UIScrollViewDelegate et la modification du décalage des vues d’arrière-plan.

Comment fonctionne le scroll sur iOS et Android

Sur iOS, le défilement est implémenté via la classe UIScrollView, dont héritent UITableView, UICollectionView et UITextView. UIScrollView intercepte les touches, analyse le motif de contact et calcule le delta de mouvement. Si l’utilisateur effectue un mouvement brusque, le système lance une animation inertielle : la décélération, calculée par la formule : velocity * decayFactor ^ t. Selon la WWDC 2023, Apple utilise une décélération paramétrique avec un facteur de 0,998, ce qui donne une sensation naturelle de friction.

Sur Android, le défilement est géré via ViewDragHelper et OverScroller. Le système reçoit un événement MotionEvent.ACTION_MOVE, calcule le décalage et l’applique à scrollY ou scrollX. L’inertie est calculée par la classe OverScroller, qui utilise une interpolation Spline basée sur un modèle physique avec friction ajustable. Le coefficient de friction par défaut est de 0,015 : plus la valeur est élevée, plus le scroll s’arrête rapidement.

La différence clé entre les plateformes est l’effet bounce. iOS ajoute par défaut une déformation élastique lors du défilement au-delà des limites du contenu (bounce), signalant à l’utilisateur que la fin a été atteinte. Android avant la version 12 nécessitait l’activation explicite de l’effet overscroll, et avec Material Design 3, il a reçu un support natif pour le stretch-overscroll. Les deux plateformes diffèrent également dans la gestion du scroll chaining : le transfert du défilement d’un conteneur imbriqué à son parent lorsque la limite est atteinte.

ScrollView, RecyclerView et UICollectionView : comparaison

UIScrollView est un conteneur de base sur iOS qui ne prend pas en charge la réutilisation des cellules. Lors de l’ajout de 1000 vues, toutes sont créées en mémoire, ce qui est critique pour les performances. UICollectionView résout ce problème via le mécanisme de dequeuing : les cellules visibles sont réutilisées et les cellules cachées sont supprimées de la hiérarchie. Selon Apple Engineering (2023), UICollectionView avec Compositional Layout offre jusqu’à 50 % de FPS plus fluide lors du traitement de grands ensembles de données par rapport à UIScrollView.

RecyclerView est le composant de scroll standard sur Android qui utilise le modèle ViewHolder pour la réutilisation des éléments. RecyclerView possède une architecture flexible : LayoutManager détermine la disposition (Linear, Grid, Staggered), ItemAnimator gère les animations et ItemDecoration ajoute des espacements et des séparateurs. Selon Android Developer Summit 2024, RecyclerView avec DiffUtil peut traiter des mises à jour de listes de 10 000 éléments en 16 ms : en une seule image d’animation.

Optimisation des performances du scroll

La fluidité du scroll se mesure en FPS (images par seconde) : l’objectif est de 60 FPS pour les écrans classiques et 120 FPS pour ProMotion. Chaque image doit être traitée en 16 ms (60 FPS) ou 8 ms (120 FPS). Si le scroll provoque des à-coups (jank, chutes d’images), l’utilisateur ressent des micro-retards qui affectent négativement la perception de la qualité de l’application. Selon Google Android Performance (2024), 75 % des utilisateurs suppriment une application lorsqu’ils subissent des ralentissements réguliers du scroll.

Les principales causes des ralentissements du scroll sont le layout thrashing et les allocations excessives. Le layout thrashing se produit lorsque le développeur lit des paramètres de layout (getWidth, getHeight) après avoir modifié des propriétés, forçant un recalcul. Chaque appel de ce type réinitialise le cache de layout et oblige le système à exécuter à nouveau Measure et Layout. La solution consiste à regrouper les opérations de lecture et d’écriture : d’abord toutes les mesures, puis toutes les modifications.

La virtualisation est une technique d’optimisation clé pour les grandes listes. Sur iOS, UICollectionView crée automatiquement des cellules uniquement pour les éléments visibles. Sur Android, RecyclerView utilise un pool de viewHolders réutilisables. De plus, le prefetching est appliqué : le système charge les éléments 1 à 2 écrans à l’avance pour que les cellules soient prêtes au moment du défilement. Sur Android, GapWorker s’en charge ; sur iOS, prefetchDataSource.

Les images nécessitent une optimisation distincte. Chargement en arrière-plan avec décodage dans un thread séparé empêche le blocage du thread UI. Des bibliothèques comme Glide (Android) et Kingfisher (iOS) fournissent un cache disque/mémoire intégré, un lazy loading et un placeholder pendant le chargement. Selon les benchmarks SDWebImage (2024), l’utilisation du cache d’images accélère le défilement des galeries de 60 % par rapport au chargement direct depuis le réseau.

Un autre problème courant est celui des hiérarchies de layout lourdes. Chaque vue imbriquée augmente le temps de Measure/Layout. La profondeur recommandée ne dépasse pas 5 niveaux d’imbrication. Sur Android, ConstraintLayout permet de créer des hiérarchies plates, tandis que sur iOS, Stack Views et SwiftUI optimisent automatiquement le layout. L’utilisation de Shadow et CornerRadius sur un grand nombre d’éléments ralentit également le scroll : ils ne doivent être appliqués qu’en cas de nécessité.