1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Divers
  5. Scrollbar personnalisable

Scrollbar personnalisable

Soyez le premier à donner votre avis sur cette source.

Vue 5 740 fois - Téléchargée 542 fois

Télécharger le projet
Commenter

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...
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (@karamel)