11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] ScrollTop et IE8

Bonjour,
Sur une page web j'ai un div dont le contenu est dynamique. Après chaque modification du contenu, je voudrais que la barre de défilement verticale se place en bas. Ci dessous une version simplifiée de ma page.

Cela fonctionne très bien avec FF v11 mais pas du tout avec IE8 ( sous XP ou seven ).
Petites remarques
a) si j'active la ligne alerte(...) sous IE la barre de défilement se positionne correctement.
b) si je mets en place dans body un 
onload="setScrollBottom('gauche');"
cela fonctionne aussi très bien.

quequ'un aurait-il une idée

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<meta http-equiv="cache-control" content="no-store, no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="EXPIRES" content="-1" />
<style type="text/css">
<!--
	#gauche {
	  border   : 1px solid red;
	  color    : black;
	  margin   : 10px;
	  padding  : 5px;
	  float    : left;
	  width    : 435px;
	  height   : 200px;
	  overflow : auto;
	  font-family      : Arial, Helvetica, Geneva;
	  font-style       : normal;
	  font-weight      : normal;
	  font-size        : 11px;
	}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!-- 
function setScrollBottom(id) {	
	var el = document.getElementById(id);
	if (el == null ) return;
//	alert( "Top=" + el.scrollTop + ", Height=" + el.scrollHeight + ", offset=" + el.offsetHeight );
	el.scrollTop = parseInt(el.scrollHeight);
}
//-->
</script>
</head>
<body>

<div id='gauche'>
<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nec magna. Nullam accumsan orci eu tortor. Ut
    quis ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer varius purus a
    nulla. Praesent leo erat, porttitor sit amet, vehicula ut, facilisis sit amet, ligula. Aliquam lacinia, arcu ac varius
    ultrices, ipsum est eleifend orci, vel adipiscing felis nisl sit amet mauris. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et
    malesuada fames ac turpis egestas. Nullam mi mi, tincidunt at, elementum ut, semper ac, orci. Aenean et nisl auctor dui
    egestas pharetra. Donec porta elit a nisl. Fusce at mi. Sed nec libero vel risus facilisis tempus.
    </p>
    <p>
    Praesent sodales, diam vel dictum feugiat, diam tellus lacinia nunc, eu adipiscing diam turpis ac magna. Maecenas
    commodo eros et felis. Donec egestas, felis nec convallis placerat, orci eros ultrices pede, vel accumsan neque metus
    gravida urna. Aenean eu tortor. Etiam a sem non augue varius condimentum. Duis et nisl non libero consequat elementum.
    Praesent eros tellus, placerat tempus, ullamcorper vitae, pharetra eget, orci. Integer tristique ultricies eros.
    Pellentesque blandit, ante vel ultrices congue, felis arcu lobortis orci, sed feugiat dolor pede quis eros. Pellentesque
    vitae libero. Aliquam in enim. Ut a ipsum.
    </p>
    <p>
    etc.
    </p>
    <p id="generated">Generated 5 paragraphs, 416 words, 2785 bytes of <a href="http://www.lipsum.com/" title="Lorem Ipsum">Lorem Ipsum</a></p>
</div>
<script language="JavaScript" type="text/javascript">
<!-- 
setScrollBottom("gauche");
//-->
</script>
</body>
</html>
Je pense avoir trouvé :
le mode de compatibilité IE8 était activé

merci à tout ceux qui m'ont lu.
Salut,
L'origine de ton souci c'est qu'un commentaire HTML de ce type empêche les anciens navigateurs de comprendre ton code

<!-- 
// code masqué aux anciens navigateurs
//-->
Sujet clos
Aller à