Comment obtenir scrollTop d'une iframe

scrollTop de jQuery retourne null quand window est une iframe. Est-ce que quelqu'un a pu trouver comment obtenir scrollTop d'une iframe?

plus d'info:

mon script tourne dans l'iframe elle-même, la fenêtre parent est sur un autre domaine, donc je ne peux pas accéder à L'ID de l'iframe ou quelque chose comme ça

16
demandé sur Zanon 2009-12-05 18:44:55

7 réponses

Vous pouvez définir scrollTop en utilisant cette configuration:

$("html,body").scrollTop(25);

alors vous pouvez essayer de le faire comme ceci:

$("html,body").scrollTop();

parce que différents navigateurs paramétrent le scrollTop sur différents éléments (corps ou html).

à Partir de la scrollTo plugin:

mais cela échouera probablement encore dans certains navigateurs. Voici la partie du code source de Ariel Flesher de scrollTo plugin pour jQuery:

// Hack, hack, hack :)
// Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
$.fn._scrollable = function(){
  return this.map(function(){
    var elem = this,
      isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;

    if( ! isWin ) {
      return elem;
    }


    var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;

     return $.browser.safari || doc.compatMode == 'BackCompat' ?
       doc.body : 
       doc.documentElement;
  });
};

vous pouvez alors courir:

$(window)._scrollable().scrollTop();

pour déterminer jusqu'à quel point l'iframe a dégringolé.

10
répondu Doug Neiner 2012-10-29 14:54:12
$('#myIframe').contents().scrollTop()
25
répondu Adam V. 2011-01-17 19:52:37

j'ai trouvé cette question en essayant de mettre scrollTop dans une iframe... pas exactement votre question (vous vouliez obtenir) Mais voici une solution à l'intérieur d'iframes pour les gens qui finissent ici en essayant de mettre.

Si vous voulez faire défiler vers le haut de la page cela ne fonctionne PAS à l'intérieur d'une iframe:

$("html,body").scrollTop(0);

Toutefois, cela va fonctionner:

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

Ou l'équivalent avec jQuery:

 $("#wrapper")[0].scrollIntoView();

pour ce balisage (contenu à l'intérieur un iframe):

<html>
  <body>
    <div id="wrapper">
      <!-- lots of content -->
    </div>
  </body>
</html>
19
répondu Chris Jacob 2017-01-16 21:12:00

Bon vieux javascript:

scrollTop = document.getElementById(IFRAME_ID).contentWindow.document.body.scrollTop;
5
répondu dudkaman 2010-11-09 04:11:04
$('#myIframe').contents().scrollTop(0);

ne fonctionne Qu'avec" 0 " comme paramètre

2
répondu Peppeneppe 2013-11-12 11:19:45

ou utiliser

sample.showLoader = function() {
// show cursor wait
document.getElementsByTagName('body')[0].style.cursor = 'wait';
var loader = $('#statusloader');
// check if we're runnign within an iframe
var isIframe = top !== self;
if (isIframe) {
    var topPos = top.pageYOffset + 300;
    // show up loader in middle of the screen
    loader.show().css({
        top : topPos,
        left : '50%'
    });
} else {
    // show up loader in middle of the screen
    loader.show().css({
        top : '50%',
        left : '50%'
    });
}
};
0
répondu hypery2k 2013-06-17 10:17:47

je sais je suis en retard pour le jeu ici, mais j'essayais de comprendre cela pour une longue liste sur mobile. scrollTop () ne fonctionnait pas pour moi en raison de conflits entre domaines (et je n'avais pas accès à la fenêtre parent), mais changer la hauteur a fait:

$('#someClickableElementInIFrame').on('click', function(e){
      $("html body").animate({
      'height' : "0"
    }, {
        complete: function(){
          $("html body").css({
            'height' : "auto"
            })
          }
      })
});
0
répondu BenTheHumanMan 2016-09-29 18:11:10