Scrollbar personnalisable

Soyez le premier à donner votre avis sur cette source.

Vue 5 740 fois - Téléchargée 542 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.
++

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

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.