Cómo obtener scrollTop de un iframe

jQuery's scrollTop devuelve null cuando window es un iframe. ¿Alguien ha podido averiguar cómo obtener scrollTop de un iframe?Cómo obtener scrollTop de un iframe

más información:

mi script se ejecuta en el propio marco flotante, la ventana padre está en otro dominio, por lo que no se puede acceder al ID del iframe ni nada de eso

Fuente

2009-12-05 mkoryak

¿Estás tratando de conseguirlo desde el interior del padre del 'iframe' o del propio' iframe' –

desde el propio iframe. Agregaré más información a mi pregunta – mkoryak

Puede establecer scrollTop mediante el uso de esta configuración:

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

lo que podría intentar conseguir de esta manera:

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

Porque diferentes navegadores configuran el scrollTop en diferentes elementos (cuerpo o html).

Desde el plugin scrollTo:

Pero eso será probablemente todavía fallar en algunos navegadores. Aquí está la sección correspondiente a partir del código fuente de Ariel Flesher's scrollTo plugin for 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; 
    }); 
};

A continuación, puede ejecutar:

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

Para determinar hasta qué punto el marco flotante se haya desplazado hacia abajo.

Fuente

2009-12-05 15:56:19

Gracias hombre. que funciona como un encanto – mkoryak

no funcionó para mí, pero los padres $ ('cuerpo') scrollTop() hizo el trabajo –

tuviera que establecer un valor para scrollTop, por lo que un pequeño ajuste:.. '$ ("html, cuerpo ") scrollTop (0);' –

He encontrado esta pregunta al intentar SET scrollTop dentro de un iframe ... no es exactamente tu pregunta (querías OBTENER) pero aquí hay una solución dentro de iframes para las personas que también terminan aquí intentando SET.

Si desea desplazarse a la parte superior de la página esto no funcionará dentro de un iframe:

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

Sin embargo, esto va a funcionar:

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

O el equivilent con jQuery :

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

Para este marcado (contenido insi) de un iframe):

<html> 
    <body> 
    <div id="wrapper"> 
     <!-- lots of content --> 
    </div> 
    </body> 
</html>

Fuente

2010-10-19 03:44:42

Gracias por este punto @ Chris. Para Firefox, solo el DOM scrollIntoView hizo el trabajo para la página que estaba dentro de un iframe (Google Chrome funciona con sólo $ ("cuerpo") scrollTop (0);.). Para los amantes de jquery, es $ ("# wrapper") [0] .scrollIntoView(); – rsmoorthy

solo este parece funcionar en IE8 ... gracias – handsomeGun

muy agradable. desde fuera del marco flotante 'document.getElementsByTagName ('iframe') [0] .contentWindow.document.getElementById ('myElementId') scrollIntoView (.),' – billynoah

Buena Javascript antigua:

scrollTop = document.getElementById(IFRAME_ID).contentWindow.document.body.scrollTop;

Fuente

2010-11-09 04:11:04 dudkaman

No funcionará cuando el JS se esté ejecutando dentro del iframe. – mikemaccana

JavaScript dentro del marco flotante, dejar fuera de la porción que devuelve el marco flotante en sí: ' scrollTop = document.body.scrollTop;' –

$('#myIframe').contents().scrollTop()

Fuente

2011-01-17 19:52:37

No sabe acerca OP pero esto lo resolvió para mí todo el camino. Estaba lidiando con un iframe, y olvidé completamente aplicar scrollTop() a su contenido. Duh! –

Saludos. Esto funcionó perfectamente para mi caso: un iframe que ocupa el 100% de la ventana gráfica con una carga modal/superpuesta. ¡Gracias! –

no funciona, volver nula –

o utilizar éste

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%' 
    }); 
} 
};

Fuente

2013-06-17 10:17:47 hypery2k

$('#myIframe').contents().scrollTop(0);

sólo funciona con "0" como parámetro

Fuente

2013-11-12 11:19:45 Peppeneppe

Si se da el argumento '0', el bastidor se desplazará al principio (0 píxeles desde la parte superior). Sin el argumento, la cantidad de píxeles de la parte superior será devuelta => ¡De eso se trata esta pregunta! –

Sé que llego tarde al juego aquí, pero estaba tratando de resolver esto para obtener una larga lista en el móvil. scrollTop() no funcionaba para mí debido a los conflictos entre dominios (y yo no tenía acceso a la ventana padre), pero cambiando la altura hizo:

$('#someClickableElementInIFrame').on('click', function(e){ 
     $("html body").animate({ 
     'height' : "0" 
    }, { 
     complete: function(){ 
      $("html body").css({ 
      'height' : "auto" 
      }) 
      } 
     }) 
});

Fuente

2016-09-29 18:11:10 BenTheHumanMan

Cómo obtener scrollTop de un iframe

Respuesta

Cuestiones relacionadas