Scroll bar personalise

Soyez le premier à donner votre avis sur cette source.

Vue 10 044 fois - Téléchargée 1 516 fois

Description

scroll bar personnalise j'ai éviter de mettre des position absolute et d'automatiser le processus de scroll pour que la mise en page soit le plus simple.

Source / Exemple :


var tour=1
var relation
var dde=document.documentElement;
function disableselecte(e){
return false;
}
function enableselecte(e){
return true;
}

function tarto(s) {
if(navigator.vendor){
ddem=document.documentElement.lastChild;
}
else{
ddem=document.documentElement;
}
if(navigator.appName.substring(0,3)=="Net"){
setX = s.clientX+ddem.scrollLeft;
setY = s.clientY+ddem.scrollTop;
}
else{
setX = event.clientX+ddem.scrollLeft;
setY = event.clientY+ddem.scrollTop;
return false;
}
}
if(navigator.appName.substring(0,3)!="Mic"){
dde.addEventListener("mousemove", tarto, false);
}
else{
dde.attachEvent("onmousemove",tarto);
}

function sp(azer,trez){

var ds1 =document.getElementById(azer)
var tbm=document.getElementById(trez)
if(navigator.appName.substring(0,3)=="Mic"){
var rcsb =ds1.childNodes[0]
var ds2=tbm.childNodes[0]
}
else{
var rcsb =ds1.childNodes[1]
var ds2=tbm.childNodes[1]
}
if(tour==2){
if(navigator.appName.substring(0,3)!="Mic"){
document.onmousedown=enableselecte;
}
tour=1;
return false;
}
if(tour==1){
px=setX;
py=setY;
tour=0;
document.onmousedown=disableselecte;
relation=(ds2.offsetWidth-tbm.offsetWidth)/((ds1.offsetWidth)-rcsb.offsetWidth)
}

if(navigator.appName.substring(0,3)=="Mic"){
ds1.style.overflow='hidden';
rcsb.style.marginLeft=parseInt(rcsb.currentStyle.marginLeft)+(setX-px)+'px';
}
else{
rcsb.style.marginLeft=parseInt(getComputedStyle(rcsb, null).getPropertyValue('margin-left'))+(setX-px)+'px';
}
ds2.style.left=ds2.offsetLeft-((setX-px)*relation)+'px'

if(ds2.offsetLeft>150){
ds2.style.left=0+'px'
rcsb.style.marginLeft=0+'px'
tour=2
}
if(ds2.offsetLeft-tbm.offsetWidth<-ds2.offsetWidth-150){
ds2.style.left=-(ds2.offsetWidth)+tbm.offsetWidth+'px'
rcsb.style.marginLeft=(ds1.offsetWidth)-rcsb.offsetWidth+'px'
tour=2
}
px=setX;
py=setY;

setTimeout('sp("'+ds1.id+'","'+tbm.id+'")',10);
}

Conclusion :


apparemment sa marche

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
mercredi 24 juin 2009
Statut
Membre
Dernière intervention
28 octobre 2009

Comment le scrollbar peut-il devenir vertical en modifiant ce script?
Messages postés
1768
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 octobre 2020
106
aidez moi
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
Tout a fait daccord avec kimjoa , tropd e variable globale , de plus une autre remarque :
- la lisibilité de ton code , on ne sait absoluement pas a quoi servent les variable et méthode exemple : function sp(azer,trez) je met au défit n'importe qui de me dire ce qu'est censé faire cette fonction ;-)

les bonne pratique sont une chose, la netteté / propreté / compréhension du code ne doit jamais être mise de coté surtout si tu qualifies ta source pour des débutant.

Bon courage ( je te noterais quand tu auras revue ta copie ;) )
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014

ok! indenter un code c'est faire des tabulations dans le traitement de tes boucles, conditions ou fonctions , genre :

function tete(){
var tetete='';
}

pour ce qui est de l'objet , cherche à prototype de fonction ...
pour l'encapsulation, ca permet de rendre inaccessible certaine variable(privée) depuis l'extérieur de ton programme , mais surtout ça limite le variables globales, sinon tu peux coder avec un namespace , du genre :

var monprog={
mafonction : function(){}
maprop : ''
}

a++
Messages postés
1768
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 octobre 2020
106
ca en fait du travaille tout ca

bon j'ai quand meme modifier un peut tous ca

j'ai limiter les varibles globales

pour la selection de texte c'etait un oubli

j'ai englobe deux fonctions

diminution du nombre de parametres

encapsuler t'es donné genre :
var sp=function(){var mavaraible=''; return ma fonction}();
ou alors , code en objet ...
-indente ton code, c'est bien plus lisible ...

tous sa me parait interresant mais j'ai pas les connaissances pour tous sa, je m'y interesse
Afficher les 6 commentaires

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.