Cette classe permet d'afficher une scrollbar dans une div, d'en modifier la valeur ou de recuperer la valeur (en pourcentage) lorsque l'utilisateur fait bouger la bar.
Utilisation :
var bar = new Scrollbar('bar', 500, 'horizontal'); // 'bar' est l'ID d'une div et 500 sera la taille du scrollbar
bar.scroll(function(v){
// v est le pourcentage du la bar
// traitements ici
});
bar.setValue(50); // place la barre à 50 %
Source / Exemple :
/**
- Class Scrollbar
-
- @elementId string
- @elementId number
- @access public
- /
function Scrollbar(elementId, size, type)
{
var
container = document.getElementById(elementId),
elem = document.createElement('div'),
subelem = document.createElement('div'),
ratio = 6, // Scroll size : 10%
direction;
// Si type est definie
if(typeof(type) == 'undefined')
direction = 'horizontal';
else
direction = type;
// Si size est definie
if(typeof(size) == 'number')
setStyle();
else
return;
/**
- Getter qui retourne la valeur actuelle de la scrollbar (en %)
- @access public
- /
this.getValue = function()
{
var percentage = getPercentage();
return percentage;
}
/**
- Setteur qui definit la valeur de la scrollbar (en %) et la fait bouger
- @access public
- /
this.setValue = function(percentage)
{
if(direction == 'horizontal')
elem.scrollLeft = setPercentage(percentage);
if(direction == 'vertical')
elem.scrollTop = setPercentage(percentage);
}
/**
- Gestion de l'evenement onscroll, appele une fonction avec le parametre pourcentage
- ex : scrollbar.scroll(function(v){*Votre code, v vaut le pourcentage du scroll*});
- @access public
- /
this.scroll = function(method)
{
if(typeof(method) == 'function')
{
elem.onscroll = function(){
var percentage = getPercentage();
method(percentage);
}
}
}
/**
- Renvoie en pourcentage la valeur de la bar
- @access private
- /
function getPercentage()
{
if(direction == 'horizontal')
return parseInt((elem.scrollLeft * 100) / (elem.scrollWidth - elem.offsetWidth));
else if(direction == 'vertical')
return parseInt((elem.scrollTop * 100) / (elem.scrollHeight - elem.offsetHeight));
}
/**
- Renvoie en pourcentage la valeur de la bar
- @access private
- /
function setPercentage(percentage)
{
if(direction == 'horizontal')
return parseInt((percentage * (elem.scrollWidth - elem.offsetWidth)) / 100);
else if(direction == 'vertical')
return parseInt((percentage * (elem.scrollHeight - elem.offsetHeight)) / 100);
}
/**
- Defini la taille de l'objet
- @access private
- /
function setStyle()
{
container.style.overflow = 'hidden';
if(direction == 'horizontal')
{
// Taille container
container.style.width = size + 'px';
container.style.height = '16px';
// Taille
elem.style.width = size + 'px';
subelem.style.width = (size * ratio) + 'px';
// On monte à 36px pour l'affichage sous IE 8, on utilise marginTop pour remonter le tout
elem.style.height = '36px';
elem.style.marginTop = '-20px';
// Evite l'affichage d'une bar verticale
elem.style.overflowX = 'auto';
elem.style.overflowY = 'hidden';
// On definit le sous element qui va influncer sur la taille du bouton et la precision
subelem.style.height = '36px';
}
else if(direction == 'vertical')
{
// Taille container
container.style.height = size + 'px';
container.style.width = '16px';
// Taille
elem.style.height = size + 'px';
subelem.style.height = (size * ratio) + 'px';
// On monte à 36px pour l'affichage sous IE 8, on utilise marginTop pour remonter le tout
elem.style.width = '36px';
elem.style.marginLeft = '-20px';
// Evite l'affichage d'une bar verticale
elem.style.overflowY = 'auto';
elem.style.overflowX = 'hidden';
// On definit le sous element qui va influncer sur la taille du bouton et la precision
subelem.style.width = '36px';
}
elem.appendChild(subelem);
container.appendChild(elem);
}
}
Conclusion :
Modification terminées !
Fonctionne sous Firefox 4, Chrome 9, IE 8 (7 en mode de compatibilité), Opera 11 et Safari 5
Certainement sous les versions antérieures aussi sauf pour IE (mais pas testé).
Par default horizontal, mais on peut definir le type vertical.
Paramètre size obligatoire !
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.