Problema al recargar div con AJAX

[javier_r2]

Buenos días,

estoy haciendo una aplicación web en la que utilizo ajax para recargar mis páginas. Mi problema es que al recargar un div, si el contenido tiene una altura superior a el contenido anterior, al recargarlo el navegador chrome no me muestra el scroll y por lo tanto el contenido no se ve completo ya que obviamente no puedo bajar con el scroll.

Como peculiaridad, si pincho en la parte superior del navegador y muevo la ventana, de pronto la barra aparecer, pero si en ese momento vuelvo a recargar para mostrar en el div otro contenido, el scroll mantiene el alto del contenido anterior y si bajo con el scroll llega un momento que sobrepasa el contenido del div y se ve página en blanco (de igual forma si vuelvo a mover la ventana del navegador se vuelve a adaptar).

Parece como si el navegador no entendiera correctamente los cambios de altura de la página al recargar los div.

Voy a adjuntar algunas capturas:





Esto solo me pasa en el navegador Chrome, ya que en IE o Firefox lo hace correctamente.

Espero podáis ayudarme. Gracias por adelantado

Mod: Imágenes corregidas

[EFEX]

No existe magia para saber el codigo, expon algo del codigo relacionado al problema. Esto es un template?

[javier_r2]

Mi código es el siguiente.

Dentro de INDEX.PHP tengo un div con ID="contenedor-escritorio" que es donde cargo todas las páginas de mi aplicación:

Código [Seleccionar] Expandir

<div class="static-content">
<div id="contenedor-escritorio" class="page-content">

</div> <!-- #page-content -->
</div>

Desde el menú hago la llamada a ajax para mostrar por ejemplo el perfil:

Código [Seleccionar] Expandir

<ul class="dropdown-menu userinfo">
<li><a href="#" onclick="javascript:cargarContenido('includes_pages/profile/profile.php','contenedor-escritorio');"><span class="pull-left">Perfil de Usuario</span> <i class="pull-right fa fa-user"></i></a></li>
</ul>

Y mi código ajax recibe las variables y las procesa:

Código [Seleccionar] Expandir

function nuevoAjax(){

     try {
          xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) {
          try {
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (E) {
               xmlhttp = false;
          }
     }

     if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
          xmlhttp = new XMLHttpRequest();
     }

     return xmlhttp;
}

function cargarContenido(pagina,destino){

    var contenedor;
    var ajax;           

    contenedor = document.getElementById(destino);

    ajax = nuevoAjax();
    ajax.open("GET", pagina, true);
    ajax.onreadystatechange=function() {
         if (ajax.readyState==4) {
              contenedor.innerHTML = ajax.responseText;
         }
     }

     ajax.send(null);
     return false;     
}


Y me recarga correctamente el div, con el problema que he comentado arriba. Solo me pasa con Chrome, ya que con IE y Firefox funciona perfecto.

He probado varias formas de recargar el div, como por ejemplo mediante post y tampoco. Me carga también perfecto pero sigue sin entender la medida correctamente Chrome y no me muestra el scroll.

Código [Seleccionar] Expandir

function carga_perfil(){
     $.post("includes_pages/profile/profile.php", function(data){
          $("#contenedor-escritorio").html(data);
     });
}

[javier_r2]

Nadie sabe como puedo solucionarlo?

[javier_r2]

No consigo encontrarle solución...  ¿Alguien tiene idea de porqué pasa?

[MinusFour]

No es un error de javascript. Eso tiene que ver con los estilos que estes aplicando y el contenido HTML que tengas.

[javier_r2]

Pero MinusFour, si fueran los estilos y el html, no crees que también me ocurriría en otros navegadores?. He provado a cambiar el overflow de diferentes capas pero lo único que consigo es que aparezca un scroll dentro de la página y yo lo que quiero es que aparezca el del propio navegador.

[DeMoNcRaZy]

si fueran los estilos y el html, no crees que también me ocurriría en otros navegadores?.

No sé, si sabes que no todos los navegadores son compatibles con todas las páginas. Por lo que has que adaptarlas a dicho navegador si quieres una compatibilidad global.

Ej: IE no mostrará el contenido igual que en Chrome.

Saludos.

[javier_r2]

Entiendo lo que comentas. Pero si fuera problema del estilo entonces no aparecería la barra al mover la ventana. Fíjate el las capturas como enseño que cuando recargo el div y luego muevo el navegador con el ratón desde la barra de arriba sale la barra de desplazamiento. Y es más cuando sale y vuelvo a recargar el div y esta vez el alto es menor, el scroll sigue manteniéndome el tamaño anterior y por lo tanto baja más de lo que tiene que bajar. Y claro si vuelvo a mover la ventana del navegador con la barra superior se adapta correctamente al tamaño de nuevo.

[[u]nsigned]

1) No uses AJAX 'manual', mejor implementalo con jQuery y te olvidas del crossbrowser.
2) Si vas a aplicar estilos CSS3 te recomiendo usar el prefijo para cada navegador, o si es posible usar un framework UI como jQuery UI o Boostrap 3