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 :).