Un div avec ascenseur personnalisé

Bonsoir,

Je souhaiterais pouvoir placer un ascenseur personnalisé sur un div afin de maîtriser la hauteur de mes pages de site.

Comme les ascenseurs système via overflow sont toujours lourdingues, je souhaiterais pouvoir en créer un tout léger...

Est-ce qu'un javascript peut faire ça ?

Salut goudurisc,

Jette un oeil ici.

Grand merci hchtot, j'avais trouvé des liens mais celui-ci est top !!!

Salut goudurisc,
Le lien d'hchtot répond parfaitement à ta demande, mais je m'interroge sur la motivation d'utiliser une barre de défilement sur une division :

goudurisc a écrit :
Je souhaiterais pouvoir placer un ascenseur personnalisé sur un div afin de maîtriser la hauteur de mes pages de site.

Attention, ça pose des problèmes d'ergonomie. Il faut positionner le curseur dans la div pour faire un scroll molette… Plutôt que «maîtriser la hauteur des pages», j'aurais plutôt dit «contraindre», vu que tu vas à l'encontre du comportement normal d'une page web. Autrement dit, est-ce que c'est vraiment nécessaire ?
Modifié par audrasjb (05 Nov 2011 - 12:49)

J'ai une nécessité absolue : mon gabarit se découpe an 3 parties : Mon texte à gauche, une grande photo à droite et un bandeau pied de page qui doit rester coller absolument au pied de la photo, ce qui implique que les quelques textes trop volumineux doivent fonctionner ave un ascenseur.
Après j'avoue que je ne connais pas encore les contraintes de la solution, j'en suis encore à essayer de comprendre comment ça marche pour la décliner précisément à mes pages...

Salut

Je te recommande VIVEMENT la jscrollbar de chez UI

http://fr.myjqueryplugins.com/jScrollbar

Encore un très bon lien, merci phpCbien !

Du coup, je vais avoir du mal à choisir

Elle est facile à implémenter et légère. Lis bien la doc !!!

Bémol...

Si tu veux changer la couleur, tu auras 3 png à remanier

Autrement elle est compatible partout

testé et approuvé

Merci pour tes précisions, je contrôle tout ça

Bon, j'avais commencé par pas travailler tout d'abord la solution de hctot, tout fonctionnerait parfaitement mais je n'arrive pas à gérer la souplesse de la hauteur de mon div

En effet, si j'indique une dimension height dans mon css "mcs3container" ça fonctionne pour une page mais si la hauteur est différentes sur les autres pages, ça ne fonctionne plus bien entendu.

J'ai testé différentes oprio pour gérer la hauteur (auto, 100%...) mais rien n'y fait. J'y suis depuis 2 heures

Voici la partie css qui gère mon div avec ascenseur :

#mcs3_container{
	position:absolute;
	visibility: visible;
	width: 550px;
	height: 250px;
}

#mcs3_container .customScrollBox{
	position:relative;
	height:100%;
	overflow:hidden;
}
#mcs3_container .customScrollBox .container{
	position:relative;
	width:510px;
	top:0px;
	float:left;
}
#mcs3_container .customScrollBox .content{
	clear:both;
}

#mcs3_container .dragger_container{
	position:relative;
	width:0px;
	height:100%;
	float:left;
	margin:10px 0 0 25px;
	border-left:4px solid #F1F1ED;
	border-right:1px solid #C1C1B4;
	cursor:pointer
}
#mcs3_container .dragger{
	position:absolute;
	width:9px;
	height:60px;
	background:#bf7a9b;
	margin-left:-5px;
	overflow:hidden;
	cursor:pointer;
	-moz-border-radius:6px;
	-khtml-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}
#mcs3_container .dragger_pressed{
	position:absolute;
	width:9px;
	height:60px;
	background:##C1C1B4;
	margin-left:-5px;
	overflow:hidden;
	cursor:pointer;
	-moz-border-radius:6px;
	-khtml-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}