Supprimer le bounce effect des apps UWP créées avec Cordova

Lorsque l'on utilise Cordova pour créer une Universal App, l'application générée possède un effet de rebond (bounce effect). Vous pouvez apercevoir cet effet dans le gif ci-dessous :

Bounce effect

Même si cela peut paraître peu gênant, ce type de détail trahit l'application en exposant le fait qu'il ne s'agit pas d'une application native, et donne donc un a priori négatif. On va voir dans cet article comment supprimer cet effet à l'aide de CSS.

Le principe consiste à supprimer le scrolling sur toute la page puis à le réactiver sur les éléments que l'on souhaite rendre scrollable.

Il faut d'abord ajouter le style suivant :

html, body {
    height: 100%;
    overflow: hidden;
}

Ensuite, l'élément devant être scrollable devra posséder la classe suivante :

.scrollable-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
}

En étant positionné en absolute (pensez à modifier les valeurs des propriétés top, bottom, left et right pour ajuster le positionnement de l'élément à votre layout) et en ayant overflow-y à auto, l'élément deviendra scrollable si son contenu est plus grand que sa taille.

Voici le résultat :

Without bounce effect

Pas plus compliqué que ça :).

Photo de profil

Ces billets pourraient aussi vous intéresser

Vous nous direz ?!

Commentaires

comments powered by Disqus