Retourner à la page d'accueil de TJS

Script scrolltop : Usage de scrollTop et scrollLeft sur un élément HTML

Edition 2 | 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>

Nouvelle édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 21 octobre

Version papier à 29€90
Format électronique à 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...
Le 24/07/2021 23:19:19 sur php7 en 45.97 ms