Firefox place le débordement au html
niveau, sauf s'il est spécifiquement conçu pour se comporter différemment.
Pour le faire fonctionner dans Firefox, utilisez
$('body,html').animate( ... );
Exemple de travail
La solution CSS serait de définir les styles suivants:
html { overflow: hidden; height: 100%; }
body { overflow: auto; height: 100%; }
Je suppose que la solution JS serait la moins invasive.
Mettre à jour
Une grande partie de la discussion ci-dessous se concentre sur le fait que l'animation scrollTop
de deux éléments entraînerait l'appel du rappel à deux reprises. Des fonctionnalités de détection de navigateur ont été suggérées puis obsolètes, et certaines sont sans doute plutôt exagérées.
Si le rappel est idempotent et ne nécessite pas beaucoup de puissance de calcul, le déclencher deux fois peut être un non-problème complet. Si plusieurs appels du rappel sont vraiment un problème et si vous souhaitez éviter la détection de fonctionnalité, il peut être plus simple de faire en sorte que le rappel ne soit exécuté qu'une seule fois à partir du rappel:
function runOnce(fn) {
var count = 0;
return function() {
if(++count == 1)
fn.apply(this, arguments);
};
};
$('body, html').animate({ scrollTop: stop }, delay, runOnce(function() {
console.log('scroll complete');
}));