Script scrolltop : Usage de scrollTop et scrollLeft sur un 駘駑ent HTML
Edition 2 | Chapitre 12 : Manipuler le document / Page 191
Edition 3 | Chapitre 12 : Manipuler le document / Page 191
Exécution du script
Emulation de la console
Code source
<html><head><title>Usage de scrollTop et scrollLeft sur un HTMLElement</title><style type="text/css"> div#container { width: 300px; /* Largeur fixe */ height: 300px; /* Hauteur fixe */ overflow: auto; /* Ascenceurs visibles si besoin */ padding: 0px; margin: 5px; border: 2px solid #333; background-color: #ccc; width: 300px; height: 300px; overflow: auto;}</style></head><h1>Usage de scrollTop et scrollLeft sur un HTMLElement</h1><p>L'image est plus grande que le div#container. Vous pouvez la déplacer avec les ascenseurs ou l'écran tactile.</p><div id="container"> <img src="media/crocus-abeille.jpg" width="831" height="671" draggable="false"></div><div id="info"></div><script type="text/javascript">/* Déplacement initial au centre de l'image */var cont = document.getElementById("container");cont.scrollTop =180;cont.scrollLeft=220;console.log("#container.scrollHeight = "+cont.scrollHeight); // 671console.log("#container.scrollWidth = "+cont.scrollWidth); // 831/* Timer pour détecter la position de scroll */setInterval(function() { var info = document.getElementById("info") info.innerHTML ="#container.scrollTop = "+cont.scrollTop+"<br>"; info.innerHTML+="#container.scrollLeft = "+cont.scrollLeft;}, 100);</script></html>