Scroll auto sur iPhone, iPod et iPad

Avertissement : cette astuce n’est pas réservée à SPIP. Elle concerne n’importe quelle page HTML destinée à l’affichage sur iPhone ou iPad. (Mais personnellement, je développe jamais que du HTML avec SPIP...)

Sur Safari versions iPhone, iPad et iPad, il est très difficile d’utiliser le scroll automatique pour des éléments de hauteur fixée dotée du style :

overflow: auto;

Le comportement existe, mais est généralement inconnu des usagers : le scroll s’obtient en caressant l’engin avec deux doigts. Le scroll avec un doigt est réservé au scroll général de la page.

Si votre page est conçue comme une « application Web », ce comportement est très pénible. Je n’ai pas trouvé de solution satisfaisante pour rétablir le comportement « habituel » sur ces machines, aussi j’ai développé un petit javascript (utilisant jQuery).

Je vous le livre donc ci-dessous, tel quel.

Outre le retour du scroll à un doigt sur les éléments à overflow, le script simule l’apparition et la disparition d’une scrollbar à la façon de Safari.

Pour l’utiliser, il faut ajouter la classe scroll_auto aux éléments concernés (les éléments qui sont conçus pour la classe overflow). Par exemple :

<div id="cadredemo" class="scroll_auto">
Ceci est mon texte.
[...]
Ce contenu est suffisamment long pour déclencher le système de scroll.
</div>

Télécharger

Pour être cohérent, il faut évidemment que le cadre doté du scroll_auto soit de hauteur fixe et doté d’un overflow, par exemple :

#cadredemo {
height: 400px;
overflow: auto;
}

Télécharger

Il suffit ensuite d’appeler le fichier Javascript dans votre header, il déclenchera tout seul tout le comportement nécessaire.

Notez bien : si vous testez votre page Safari sous Mac (ou sous Windows) en modifiant son indication d’agent utilisateur, le comportement ne fonctionnera pas : les événements touchstart, touchmove et touchend ne sont intégrés qu’aux versions iPhone, iPod et iPad.

var debut_scroll_Y = false;
var debut_marginTop = 0;
var hauteur_scrollbar_auto = 100;
function fix_scroll_auto() {
if(
(navigator.userAgent.match(/iPhone|iPod|iPad/i))
) {
$(".scroll_auto").each(function() {
var contenu = $(this).html();
var start_time = 0;
var last_decal = 0;
var rapport = 1;
var hauteur_max = 100;
var hauteur_boite = 100;
if ($(this).children(".wrapper").width() > 0) {
} else {
$(this)
.html( "<div class='scrollbar_auto' style='position: absolute; top: 0px; right: 3px; -webkit-box-shadow: 0px 0px 2px rgba(255,255,255, 0.3); width: 5px; height: 100px; -webkit-border-radius: 3px; background-color: rgba(0,0,0,0.5); z-index: 100; display: none; '></div>"
+ "<div class='wrapper' style='height: auto; -webkit-transition-property: margin-top; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease-out;'>"
+ contenu + "<div style='clear: both;'></div></div>"
+ "<div class='bidon' style='position: absolute; opacity: 0;'></div>"
)
.css("position", "relative")
.css("overflow", "hidden");
}
this.ontouchstart = function(evt) {
debut_scroll_Y = evt.touches[0].pageY;
var now = new Date().getTime();
start_time = parseInt(now, 10);
last_decal = 0;
debut_marginTop = parseInt($(this).children(".wrapper").css("marginTop"));
rapport = $(this).outerHeight() / $(this).children(".wrapper").outerHeight();
if (rapport < 1) {
$(this).children(".scrollbar_auto").fadeIn();
hauteur_scrollbar_auto = Math.floor(rapport * $(this).outerHeight());
$(this).children(".scrollbar_auto").height(hauteur_scrollbar_auto);
}
hauteur_max = $(this).children(".wrapper").outerHeight() - $(this).outerHeight();
hauteur_max = -1 * hauteur_max;
hauteur_boite = $(this).outerHeight();
};
this.ontouchmove = function(event) {
if (rapport > 1) return false;
var y = event.touches[0].pageY;
var decal = y - debut_scroll_Y;
last_decal = decal;
decal = decal + debut_marginTop;
if (decal > 0) decal = 0;
if (decal < hauteur_max) decal = hauteur_max;
$(this).children(".wrapper").css("marginTop", decal);
// Hack bizarre: dans certains cas, il faut ecrire quelque chose quelquepart pour que le scroll fonctionne en direct
$(this).children(".bidon").html("bidon");
var rapport_pos = (decal / hauteur_max);
var vide = Math.round( rapport_pos * (hauteur_boite - hauteur_scrollbar_auto));
$(this).children(".scrollbar_auto").css("marginTop", vide);
return false;
};
this.ontouchend = function(event) {
var now_end = new Date().getTime();
var end_time = parseInt(now_end, 10);
var duree = end_time - start_time;
var decal = Math.round(last_decal * ( 1 + 200/duree));
decal = decal + debut_marginTop;
if (hauteur_max < 0) {
if (decal > 0) decal = 0;
if (decal < hauteur_max) decal = hauteur_max;
$(this).children(".wrapper").css("marginTop", decal);
// Hack bizarre: dans certains cas, il faut ecrire quelque chose quelquepart pour que le scroll fonctionne en direct
$(this).children(".bidon").html("bidon");
}
}
});
}
}
$(document).ready(function() {
fix_scroll_auto();
});
$(document).bind("touchend touchcancel", function(){
$(".scrollbar_auto").fadeOut();
});

Télécharger

Version 0.2.

Amélioration du rendu visuel de la scrollbar.
Effet de transition du scroll : à la fin du scroll, si on a effectué un mouvement vertical rapide (« swipe »), le scroll continue un peu plus loin.

Version 0.3 Les clicks (pas de scroll) à l’intérieur du scroll provoquaient un décalage après un premier scroll (à noter : dans un simple « click », il n’y a semble-t-il pas de ontouchmove du tout).

Version 0.4 Optimiser le code, augmenter la vitesse d’exécution.