Scrollbar personnalisable
Soyez le premier à donner votre avis sur cette source.
Vue 5 921 fois - Téléchargée 552 fois
Description
il s'agit de barre de scroll en javascript personnalisable avec le css j'avait fait une source dans ce genre mais elle n'etait pas parfaite j'ai donc refait une source completement differente et fonctionnant nettement mieux seul le principe d'utiliser les marges a ete conservé tout est automatisé il suffit de créer sa barre de scroll avec le css d'ajouter un onmousedown au curseur de scroll pour appeler la fonction en lui precisant l'element qui doit etre scrollé le reste se fera automatiquement.
++
UN... DEUX... TROIS...
++
Source / Exemple :
var kscroll={
vascro:0,
setX:0,
setY:0,
px:0,
py:0,
elem:null,
elem2:null,
direction:null,
dde:document.documentElement,
selecte:function(ev){
ev.preventDefault();
},
sp:function(evt,trez){
evt =(!evt) ? window.event : evt;
kscroll.elem=((navigator.userAgent.substring(30,31))<=8) ? evt.srcElement : evt.currentTarget;
if(arguments.length<=1){
if((navigator.userAgent.substring(30,31))<=8){
kscroll.dde.detachEvent("onmouseup",kscroll.sp);
kscroll.dde.detachEvent("onmousemove",kscroll.f_scroll);
}
else{
kscroll.dde.removeEventListener("mousedown", kscroll.selecte, false);
kscroll.dde.removeEventListener("mousemove", kscroll.f_scroll, false);
kscroll.dde.removeEventListener("mouseup", kscroll.sp, false);
}
}
if(arguments.length>=2){
kscroll.elem2=document.getElementById(trez);
var rcsb =kscroll.elem;
if(kscroll.elem.parentNode.offsetWidth > kscroll.elem.parentNode.offsetHeight){
kscroll.direction="horizon";
kscroll.vascro=((navigator.userAgent.substring(30,31))<=8) ? parseInt(rcsb.currentStyle.marginLeft) : parseInt(getComputedStyle(rcsb, null).getPropertyValue('margin-left'));
}
else{
kscroll.direction="vertical";
kscroll.vascro=((navigator.userAgent.substring(30,31))<=8) ? parseInt(rcsb.currentStyle.marginTop) : kscroll.vascro=parseInt(getComputedStyle(rcsb, null).getPropertyValue('margin-top'));
}
if((navigator.userAgent.substring(30,31))<=8){
kscroll.dde.attachEvent("onmousemove",kscroll.f_scroll);
kscroll.dde.attachEvent ("onmouseup",kscroll.sp);
}
else{
kscroll.dde.addEventListener("mousemove", kscroll.f_scroll, false);
kscroll.dde.addEventListener("mousedown", kscroll.selecte, false);
kscroll.dde.addEventListener("mouseup", kscroll.sp, false);
}
kscroll.setX=evt.clientX;
kscroll.setY=evt.clientY;
kscroll.px=kscroll.setX;
kscroll.py=kscroll.setY;
}
},
f_scroll:function(s){
s =(!s) ? window.event : s;
s.returnValue = false;
kscroll.setX =s.clientX;
kscroll.setY =s.clientY;
var tbm=kscroll.elem2;
var ds2=tbm.getElementsByTagName('*')[0];
var ds1 =kscroll.elem.parentNode;
var rcsb =kscroll.elem;
if(kscroll.direction=="horizon"){
kscroll.vascro+=(kscroll.setX-kscroll.px);
if(kscroll.vascro<=0){
rcsb.style.marginLeft=0+'px';
}
else if(kscroll.vascro>=ds1.offsetWidth-rcsb.offsetWidth){
rcsb.style.marginLeft=(ds1.offsetWidth-rcsb.offsetWidth)+'px';
}
else{
rcsb.style.marginLeft=kscroll.vascro+'px';
}
kscroll.px=kscroll.setX;
kscroll.py=kscroll.setY;
var valeur=(parseInt(rcsb.style.marginLeft)/(ds1.offsetWidth-rcsb.offsetWidth)).toFixed(2);
document.getElementById('nbfic').value=valeur;
ds2.style.marginLeft=-(valeur*(ds2.offsetWidth-tbm.offsetWidth))+'px';
}
else{
kscroll.vascro+=(kscroll.setY-kscroll.py)
if(kscroll.vascro<=0){
rcsb.style.marginTop=0+'px';
}
else if(kscroll.vascro>=ds1.offsetHeight-rcsb.offsetHeight){
rcsb.style.marginTop=(ds1.offsetHeight-rcsb.offsetHeight)+'px';
}
else{
rcsb.style.marginTop=kscroll.vascro+'px';
}
kscroll.px=kscroll.setX;
kscroll.py=kscroll.setY;
var valeur=(parseInt(rcsb.style.marginTop)/(ds1.offsetHeight-rcsb.offsetHeight)).toFixed(2)
document.getElementById('nbfic').value=valeur
ds2.style.marginTop=-(valeur*(ds2.offsetHeight-tbm.offsetHeight))+'px';
}
}
}
Conclusion :
UN... DEUX... TROIS...
Codes Sources
A voir également
- Scrollbar personnalisable
- Scrollbar personnalisée ✓ - Forum - Javascript / DHTML
- Scrollbar verticale personnalisée [svp] - Codes sources - Javascript (Effets)
- Javascript boîte de dialogue personnalisée - Conseils pratiques - Javascript
- Javascript : Personnaliser les boîtes de dialogue - CodeS SourceS - Guide
- Excel vba barre de menu personnalisée ✓ - Forum - VBA Office (Excel, Word ...)
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.