Le Monde de Crabs : Scrollbar avec JQuery

Introduction

C'est souvent lorqu'on fait de l'AJAX que l'on veut suivre l'activité d'un script dans un 'div' sous forme d'un journal système.

L'objectif ici sera en une ligne de se mettre toujours sur la dernière ligne contenue dans le 'div'.

Du HTML

Après avoir dans la section 'head' inclus jQuery et vos scripts, il faudra déclarer dans votre page un 'div' que nous positionnerons avec l'aide du CSS

<div id="log">&nbsp;</div>

Du CSS

Il faut que notre 'div' ait une hauteur fixe avec un ascenseur, sinon l'astuce n'est pas utile... On décide de le positionner en bas à droite avec une hauteur de 5 lignes de 60% de la largeur.

#log {
	position: absolute ;
	top: auto ; bottom: 0 ; height: 5em ;
	left: auto; right: 0 ; width: 60% ;
	overflow-y: scroll ;
	}

Du Javascript avec JQuery

Rien de complexe, mais on jongle avec les incohérence de l'API de jQuery où tous les attributs ne sont pas gérés de la même manière.

  $( '#log' ).html( les_info_a_afficher ) ;
  $( '#log' ).scrollTop( $( '#log' ).attr( 'scrollHeight' ) ) ;

Renseignez-vous sur les brevets logiciels en Europe :

NoSoftWarePatents.com (en français)

Les images représentant des sociétes, des associations ou des marques restent associées, par un lien, à ces sociétés, associations ou marques. Elles ne signifie en rien que ces sociétés, associations ou marques soutiennent ce site.

Sauf précision contraire, le contenu de ce site est mis à disposition sous un contrat Creative Commons.

Les informations fournies le sont sans aucune garantie. L'auteur ne pourra être tenu responsable de leurs utilisations.

De par l'utilisation du HTML 4.01 Strict et des CSS 2.1, le monde de crabs sera correctement vu avec les navigateurs respectant ces normes, Mozilla ou FireFox par exemple.

Site :	Le Monde de Crabs
Titre :	Scrollbar avec JQuery
Date du document :	04/09/2011
Auteur :	Christophe Cazajus
Mail :	crabs(mettre le @)crabs-world.com ou utiliser ce formulaire de contact
Mots-clé :	crabs, monde, francais, francophone, français, http, html, jquery, scrolltop, overflow-y
Description :	Scroll automatique en bas d'un div afin de simuler l'affichage d'un journal système (like 'tail -f').
Validation :	html, css