web-dev-qa-db-fra.com

jQuery scrollTop () ne fonctionne pas dans le défilement DIV sur les navigateurs mobiles, alternatives?

J'essaie de faire défiler jusqu'à un emplacement spécifique dans une DIV à défilement. En ce moment, j'utilise un décalage de pixels avec la fonction jQuery scrollTop () qui fonctionne très bien sur les navigateurs de bureau mais cela ne fonctionne pas sur les navigateurs mobiles Android à l'exception de Google Chrome Android (ne pas avoir d'appareil iOS pour tester si cela fonctionne). Toutes les solutions que j'ai trouvées sont pour le défilement des pages (fenêtres) et non pour le défilement dans un DIV, quelqu'un a-t-il des suggestions sur ce que je peux utiliser d'autre pour accomplir la même tâche?

Voici un exemple :
http://jsfiddle.net/aQpPc/
http://jsfiddle.net/aQpPc/embedded/result/

D'autres choses que j'ai essayées fonctionnent dans les navigateurs de bureau :

document.getElementById('ID_of_element_in_a_DIV').scrollIntoView();
document.getElementById('ID_of_DIV').scrollTop = 200;

EDIT 3/11/13:

Il s'agit d'un savoir Android: https://code.google.com/p/Android/issues/detail?id=19625

Un utilisateur du rapport de bogue a suggéré une solution:

car le problème ne semble apparaître que lorsque la propriété overflow est définie sur scroll, vous pouvez d'abord la définir sur "caché", définir la propriété scrollTop, puis la réinitialiser sur "scroll" (ou auto). La propriété scrollTop semble être respectée lorsque l'élément est restitué avec des barres de défilement. On ne sait pas si cela a des effets secondaires inattendus, mais "cela fonctionne sur ma machine!"

javascriptjqueryhtmlscrollmobile-browser
30
LukeS

Cela a fonctionné pour moi:

setTimeout( function() {
    $(div).scrollTop(0)
}, 500 );
10
wayofthefuture

Une solution de contournement qui a fonctionné pour moi: tout d'abord, définissez temporairement la propriété de débordement sur "caché", puis définissez la propriété scrollTop, puis redéfinissez la propriété de débordement sur "scroll" (ou auto). La valeur scrollTop semble être conservée intacte et honorée lorsque la propriété overflow est redéfinie sur "scroll". C'était une solution de contournement assez banale qui fonctionnait sur tous les navigateurs sur lesquels j'ai testé (ordinateur de bureau et mobile). Je ne l'ai pas testé de manière exhaustive, et je n'ai pas testé avec des transitions en place, donc il peut y avoir des effets secondaires que je n'ai pas rencontrés ... Votre kilométrage peut varier - mais c'est une chose facile à essayer.

6
Allan Nienhuis

J'ai trouvé la réponse ici http://blog.jonathanargentiero.com/jquery-scrolltop-not-working-on-mobile-devices-iphone-ipad-Android-phones/

Les téléphones portables ne comprennent pas $('html,body') donc vous pouvez faire ce qui suit pour mobile

if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    window.scrollTo(0)
} else {
    // default `$('html,body')` code for scrolling
}

[~ # ~] ou [~ # ~]

utilisez simplement $('body') au lieu de $('html, body').

3
Gaurav Aggarwal

La seule façon de faire défiler vers le haut de la page sur une Galaxy Tab était de masquer la page body pendant 100 ms pendant le défilement. Utilisation de jQuery:

$("body").hide();
window.scrollTo(0, 0);
setTimeout(function(){ $("body").show() }, 100);
1
lofihelsinki

Avez-vous essayé cela?

$("html").scrollTop(0);
1
Rohi

plutôt que d'utiliser les méthodes scroll, scrollTo ou scrollTop (qui me posent des problèmes sur mobile), je recommande de définir un ID sur votre élément DOM supérieur (comme #top), et d'utiliser simplement:

document.getElementById("top").scrollIntoView();

qui fonctionne le mieux pour moi jusqu'à présent sur tous les appareils et navigateurs.

1
Gray

Définir temporairement la propriété overflow sur 'caché', comme recommandé dans la réponse de @Allan Nienhuis, ne fonctionne pas sur Android 4.0.3, Par exemple (qui est , par exemple, ce que les Kindle Fire 2 exécutent) - lorsque vous redéfinissez overflow sur scroll, l'élément revient en haut.

Alternatives:

  • Lancez votre propre défilement via une fonction d'aide, comme démontré ici - bien que cela soit simple à mettre en œuvre, il est simple en ce qu'il ne vous donne pas de défilement inertiel ou de défilement excessif.

  • Utilisez une bibliothèque telle que iScroll , qui implémente son propre défilement sophistiqué (inertiel, survol) basé sur des transformations CSS.

L'utilisation d'iScroll nécessite un peu de configuration, cependant: vous avez besoin d'un wrapper div avec une hauteur et un style fixes overflow: hidden Et l'élément à faire défiler doit avoir aucun style overflow. Cette démo jsFiddle montre comment c'est fait.

1
mklement0

J'ai quelques solutions à essayer. Vous devrez les tester vous-même, car je ne les ai pas essayés dans un navigateur mobile auparavant, mais les voici:

  1. Utilisez la méthode .css() de jQuery (ou .animate() en fonction de votre objectif éventuel) pour ajuster la marge supérieure (remarque: vous devrez changer le débordement en caché et envelopper le texte dans un div interne, qui serait l'élément dont vous ajustez la marge)
  2. Faites la même chose que dans la première solution, sauf définissez la position de la div intégrée sur relative et ajustez son attribut top.

Faites-moi savoir si vous avez besoin d'aide dans ce cas ou si vous avez d'autres questions à ce sujet. Bonne chance! :)


.

1
Zachary Kniebel

Utilisez le code suivant:

$("body").animate( { scrollTop: 50,  },  800,  function(){
    $("body").clearQueue();
} );
0
user2823361

Ces solutions n'ont pas fonctionné pour moi. Je sais que quelqu'un a mentionné la détection mobile, mais son approche n'a pas fonctionné pour moi. Il m'est finalement apparu d'utiliser la détection mobile pour fournir deux styles CSS différents pour chaque cas. Peut-être pas idéal mais ça marche à coup sûr. Changer temporairement les styles avec js également suggéré ci-dessus n'a pas fonctionné pour moi.

J'avais une disposition à deux colonnes avec des divs à défilement indépendant, chaque paramètre étant défini sur overflow: scroll et le corps devait être défini sur overflow: hidden. J'ai besoin d'utiliser scrollTop sur l'une des colonnes et aucune solution n'a fonctionné.

J'ai utilisé wp_is_mobile () (fonction Wordpress) et si mobile true, overflow: hidden est supprimé de body et les divs avec overflow: scroll ont ce CSS supprimé. Enfin, scrollTop a fonctionné sur mobile.

0
Pitchpole

Essayez d'utiliser la méthode .animate de jQuery:

$('.div').animate({ scrollTo: x; });

Où x est égal à la position du div que vous souhaitez faire défiler vers le haut.

0
hitecherik
jQuery(document).ready(function($) {

$(".scroll").click(function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1500);
});
});

<a href="#top" class="scroll"></a>
0
johndoe