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 :
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 :
Pas plus compliqué que ça :).