Bonjour à tous.

Le problème concerne les navigateurs de type Webkit.
Lorsqu'un événement popstate se produit, ces navigateurs effectuent un défilement avant d'effectuer une action.

Exemple :

Site Full Ajax.
History pushstate pour construire l'historique du navigateur.
Ecoute du posptate pour gérer les boutons précédents et suivants.

Le navigateur saute à la même place que la page précédente avant d'afficher le nouveau contenu demandé.

En d'autres termes, le navigateur restaure la position de défilement de l'état précédent automatiquement quand un événement popstate se produit. Il y a donc un micro flash (100ms) de la page actuelle avant qu'il charge le contenu.

Y'a-t'il un boss pour sauver le président ?

8 réponses


coquin38
Auteur

Y-a-t'il un flic pour sauver la reine ?

Bonsoir.
Excuses moi, mais, tu ne poses ni question, ni ne demande d'aide.
Donc, qu'expères-tu comme réponse à ton sujet ?
Car là c'est juste comme si tu postais un article.
Alors, essaies de faire un peu d'effort sur la rédaction si tu attends une réponse sur ton sujet.

coquin38
Auteur

Bonsoir.

Comment faire pour que les navigateurs basés sur typekit ne produisent pas de défilement avant toute action liée à un popstate ? (ou eventuellement après le chargement du contenu).

Bonjour,
cela semble difficile à expliquer et également difficile à comprendre.
Le plus simple serait de pouvoir reproduire la situation . Un exemple en ligne?

coquin38
Auteur

Bonjour,

effectivement, ce n'est pas simple à expliquer. Je ne peux fournir d'exemples clients. Je vais essayé d'être plus clair, et si ça ne l'est toujours pas, je prendrai le temps de construire un exemple.

On part sur un site full ajax. Cela me permet d'effectuer de belles transitions et de ne pas recharger certains éléments. J'utilise pushstate et popstate pour construire un historique.

Le problème :

Je navigue sur la page 1 de mon site Web. Il y a un lien en bas de cette page qui pointe vers la page 2 de mon site. J'ai donc scrollé pour atteindre ce lien. Je clique sur ce lien qui charge en ajax la page 2. Une fois sur la page 2, j'utilise la flêche retour du navigateur pour retourner à ma page 1. C'est à ce moment précis que le problème apparaît. Avant de charger ma page 1, le navigateur de type Webkit effectue un defilement sur la page 2 qui correspond exactement au scroll que j'avais fait sur la page précédente (donc la page 1). Ceci dur très peu de temps (100ms ??), mais un micro flash se produit et c'est grandement perfectible.

Ce défilement intempestif ne s'effectue que sur les navigateurs de type Webkit. Lorsqu'un événement popstate se produit, ces navigateurs effectuent un défilement (correspondant à l'état du défilement de la page précédente) avant d'effectuer une action.

Je formule une question : comment faire gommer ce flash ?

Merci d'avance au pilote présent dans l'avion.

Si on essaye de supprimer le scroll durant le popstate , cela donne quoi ?

function deleteScroll(e) {
    e.preventDefault();
    document.removeEventListener('scroll', deleteScroll);
}
window.onpopstate = function () {
    document.addEventListener('scroll', deleteScroll);
};​
coquin38
Auteur

J'ai bien essayé, mais le scroll a lieu avant toute action du popstate.

http://stackoverflow.com/questions/10742422/prevent-browser-scroll-on-html5-history-popstate
Je ne suis pas très doué en anglais mais regarde la réponse (3ème) de Nathan MacInnes.

Rebonjour

Je suis preneur de pouvoir visualiser l'exemple quelque part.