La propiedad scrollHeight puede devolver valores incorrectos en Internet Explorer

  • Artículo
  • Tiempo de lectura: 3 minutos

Importante

La aplicación de escritorio Internet Explorer 11 está retirada y sin soporte a partir del 15 de junio de 2022 para determinadas versiones de Windows 10.

Todavía puede acceder a sitios antiguos heredados que requieren Internet Explorer con el modo Internet Explorer en Microsoft Edge. Obtenga más información.

La aplicación de escritorio Internet Explorer 11 se redirigirá progresivamente al explorador Microsoft Edge, más rápido y seguro. En última instancia, se deshabilitará a través de Windows Update. Deshabilite IE hoy.

En este artículo se proporciona un ejemplo para llamar a la propiedad Scroll height para establecer el alto de la página web.

Versión del producto original:   Internet Explorer 9 y versiones posteriores
Número KB original:   2684777

Síntomas

La scrollHeight propiedad de un iframe puede devolver un valor menor del esperado. El uso de este valor para cambiar el tamaño del alto del iframe puede hacer que la barra de desplazamiento vertical aparezca haciendo que el contenido sea más alto.

Causa

Microsoft ha confirmado que hay un problema con el cálculo scrollHeight de la propiedad.

Solución alternativa

Agregue relleno adicional al alto. Esto resolverá la mayoría de las situaciones si la barra de desplazamiento que aparece no es deseada. Como alternativa, cambie al modo de documento estándar de Internet Explorer 9, ya que el problema no se produce en ese modo.

Más información

No se conocen exactamente todas las condiciones necesarias para que aparezca este problema. En algunas situaciones, el problema solo aparece en otros niveles de zoom además del 100 %.

A continuación se muestra un ejemplo en el que scrollHeight no es lo suficientemente grande como para usar como pixelHeight aunque el relleno , el margen y el borde son todos 0 píxeles en el elemento y del html iframe. body Cuando el iframe es mayor que el contenido, proporciona un scrollHeight de 491 aunque 491 no sea suficiente para impedir que aparezcan las barras de desplazamiento. Este ejemplo en particular solo se reproduce en el modo de estándares de Internet Explorer 8. Otros ejemplos pueden reproducirse para el modo estándar de Internet Explorer 9 y versiones posteriores o el modo Quirks.

  • test.htm
<!doctype>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=8"/>
    </head>
    <body>
        <button onclick="Test()">Set iframe's pixelHeight to scrollHeight</button><br/>
        <div id="myDiv" style="position: absolute; left: 200px; border: 2px solid black; height: 50px; width: 300px"></div>
        <iframe style="width: 182px; height: 491px; border: 1px solid green;" id=myiframe src="iframe.htm" frameBorder=0></iframe>
        <script language="javascript">
            function Test()
            {
            var obj = document.getElementById("myiframe");
            obj.style.pixelHeight = obj.contentWindow.document.body.scrollHeight;
            var result = obj.contentWindow.document.body.scrollHeight;
            document.getElementById("myDiv").innerHTML = "iframe scrollHeight = " + result + "<br/>";
            }
        </script>
    </body>
</html>
  • iframe.htm
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
            body {
            font-family: verdana, arial, helvetica, sans-serif;
            font-size: 70%;
            padding: 0px; margin: 0px; border: 0px;
            }
            html { padding: 0px; margin: 0px; border: 0px; }
        </style>
    </head>
    <body>
        <div>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <p>1st row in p tags</p>
                        </td>
                    </tr>
                    <tr>
                        <td>2nd row</td>
                    </tr>
                    <tr>
                        <td>
                            3rd row of text
                            <div>
                                <hr>
                                Text below the hr that wraps to next line<br>
                                This line of text is lone enough to go to four lines and at seventy five percent zoom will cause the problem<br>
                                <hr>
                                abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf abcdedf
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Si el alto del iframe se establece en función de esta propiedad en el controlador de eventos onresize, debe tener cuidado de evitar una secuencia infinita de llamadas de onresize, ya que puede que esté regateando el alto del iframe entre un alto sin barras de desplazamiento y un alto con barras de desplazamiento. Agregar el relleno o usar marcas debe evitar la recursividad infinita.