164 votes

Animate scrollTop ne fonctionne pas dans Firefox

Cette fonction fonctionne bien. Il fait défiler le corps à l'offset d'un conteneur désiré

 function scrolear(destino){
    var stop = $(destino).offset().top;
    var delay = 1000;
    $('body').animate({scrollTop: stop}, delay);
    return false;
}
 

Mais pas dans Firefox. Pourquoi?

-MODIFIER-

Pour gérer le double trigger dans la réponse acceptée, je suggère d'arrêter l'élément avant l'animation:

 $('body,html').stop(true,true).animate({scrollTop: stop}, delay);
 

331voto

David Hedlund Points 66192

Firefox place le débordement au niveau html , 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.

19voto

Stephen Points 61

La détection de fonctionnalité et puis l'animation sur un seul objet pris en charge serait bien, mais il n'y a pas une solution en ligne. En attendant, voici une façon d'utiliser une promesse de faire un simple rappel à chaque exécution.

$('html, body')
    .animate({ scrollTop: 100 })
    .promise()
    .then(function(){
        // callback code here
    })
});

Mise à JOUR: Voici comment vous pouvez utiliser la fonctionnalité de détection de la place. Ce morceau de code doit évaluée avant votre animation composez le:

// Note that the DOM needs to be loaded first, 
// or else document.body will be undefined
function getScrollTopElement() {

    // if missing doctype (quirks mode) then will always use 'body'
    if ( document.compatMode !== 'CSS1Compat' ) return 'body';

    // if there's a doctype (and your page should)
    // most browsers will support the scrollTop property on EITHER html OR body
    // we'll have to do a quick test to detect which one...

    var html = document.documentElement;
    var body = document.body;

    // get our starting position. 
    // pageYOffset works for all browsers except IE8 and below
    var startingY = window.pageYOffset || body.scrollTop || html.scrollTop;

    // scroll the window down by 1px (scrollTo works in all browsers)
    var newY = startingY + 1;
    window.scrollTo(0, newY);

    // And check which property changed
    // FF and IE use only html. Safari uses only body.
    // Chrome has values for both, but says 
    // body.scrollTop is deprecated when in Strict mode.,
    // so let's check for html first.
    var element = ( html.scrollTop === newY ) ? 'html' : 'body';

    // now reset back to the starting position
    window.scrollTo(0, startingY);

    return element;
}

// store the element selector name in a global var -
// we'll use this as the selector for our page scrolling animation.
scrollTopElement = getScrollTopElement();

Maintenant utiliser le var que nous venons de définir comme le sélecteur de page, le défilement de l'animation, et l'utilisation de la syntaxe normale:

$(scrollTopElement).animate({ scrollTop: 100 }, 500, function() {
    // normal callback
});

6voto

Aidan Ewen Points 4364

J’ai passé les âges essaie de travailler dehors pourquoi mon code ne fonctionne pas -

Le problème est dans mon css-

Je l’ai mis à la place (et restait préoccupante sur pourquoi il a été mis en premier lieu). Qu’il fixe pour moi.

1voto

user2338481 Points 11

Méfiez-vous de cela. J'ai eu le même problème, ni Firefox ou Explorer le défilement avec la

$('body').animate({scrollTop:pos_},1500,function(){do X});

J'ai donc utilisé comme David a dit

$('body, html').animate({scrollTop:pos_},1500,function(){do X});

Grand il a travaillé, mais nouveau problème, puisqu'il y a deux éléments, le corps et l'html, la fonction est exécutée deux fois, c'est, faire X s'exécute deux fois.

essayé seulement avec "html", et Firefox et Explorer de travail, mais maintenant, google Chrome ne prend pas en charge cette.

Il est donc nécessaire de corps pour Chrome, et html pour les navigateurs Firefox et Explorer. Est-ce un bug jQuery? ne sais pas.

Méfiez-vous cependant de votre fonction, car il sera exécuté deux fois.

-3voto

Peter Points 3

Pour moi le problème était que firefox automatiquement sauté à l'ancre avec le nom-attribut le même que le nom de hachage je l'ai mis dans l'URL. Même si je l'ai mis .preventDefault() pour l'en empêcher. Donc après avoir changé le nom des attributs, firefox n'a pas automatiquement pour les ancres, mais l'exécution de l'animation à droite.

@Toni Désolé si ce n'était pas compréhensible. Le truc, c'est que j'ai changé les valeurs de hachage dans l'URL, par exemple www.someurl.com/#hashname. Ensuite, j'ai eu par exemple un point d'ancrage, comme <a name="hashname" ...></a> de jQuery qui devrait faire défiler automatiquement. Mais ce n'est pas parce qu'il a sauté à droite à l'ancre avec le même nom d'attribut dans Firefox. J'ai donc dû changer le nom de l'attribut à quelque chose de différent à partir du nom de hachage, par exemple à l' name="hashname-anchor" puis le défilement travaillé.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X