Soyez le premier à donner votre avis sur cette source.
Vue 5 388 fois - Téléchargée 753 fois
//------------------------------------------------------------- // Nom Document : scrollpage // Auteur : kazma (Kamel A) // Objet : defilement de page http://www.javascriptfr.com/ // Création : 01.06.2013 //------------------------------------------------------------- // Mise à Jour : //------------------------------------------------------------- var kdeme={ sens:0, inter:0, vitesse:0, generale:null, elem:0, elnav:null, ctn:null, tbel: new Array, men:0, diff:0, //fonction pour le controle de la position du scroll marchar:function(){ var elem=kdeme.elnav.getElementsByTagName('span'); var hauteur_scroll=document.documentElement.scrollTop || document.body.scrollTop; var hauteur_reel=0; for (var i=0;i<kdeme.tbel.length;i++){ var elem_height=kdeme.tbel[i].clientHeight; hauteur_reel+=elem_height; if(hauteur_scroll<hauteur_reel && hauteur_scroll>=hauteur_reel-elem_height){ kdeme.men=i; break; } } for (var i=0;i<elem.length;i++){ if(elem[i].style.color!='black' && elem[kdeme.men] != elem[i]){ elem[i].style.color='black'; break; } } elem[kdeme.men].style.color='#15aaff'; }, //fonction qui initialise les elements pour le scroll automatique kasco:function (arg){ clearInterval(kdeme.inter); var hauteur_scroll=document.documentElement.scrollTop || document.body.scrollTop; kdeme.elem=kdeme.tbel[arg]; if(arg=='pagea'){ kdeme.diff=document.documentElement.offsetHeight-80; } else if(arg=='pager'){ kdeme.diff=-document.documentElement.offsetHeight+80; } else{ kdeme.diff=kdeme.elem.offsetTop - hauteur_scroll; } kdeme.sens=(kdeme.diff > 0 ? 'plus' : 'moins'); kdeme.vitesse=Math.round(Math.abs(kdeme.diff/25)); kdeme.inter=setInterval(kdeme.kasca,20); kdeme.retour() }, // la fonction qui effectue le scroll kasca:function(arg){ var ddl=(navigator.vendor) ? document.body : document.documentElement; var hauteur_scroll=ddl.scrollTop || document.body.scrollTop; if(kdeme.sens=='plus'){ if(kdeme.diff-kdeme.vitesse<=0){ ddl.scrollTop+=(kdeme.diff); clearInterval(kdeme.inter); return false; } ddl.scrollTop+=kdeme.vitesse; kdeme.diff-=kdeme.vitesse } else { if(kdeme.diff+kdeme.vitesse>=0){ ddl.scrollTop-=Math.abs(kdeme.diff); clearInterval(kdeme.inter); return false; } ddl.scrollTop-=kdeme.vitesse; kdeme.diff+=kdeme.vitesse } }, suite:function(){ if(kdeme.men < kdeme.tbel.length-1){ kdeme.kasco(kdeme.men+1) } }, preced:function(){ if(kdeme.men > 0){ kdeme.kasco(kdeme.men-1) } }, deb:function(){ kdeme.kasco(0) }, fin:function(){ kdeme.kasco(kdeme.tbel.length-1) }, //fonctions pour la monté et descente du bandeau aller:function(){ var nume=kdeme.general; if(nume.offsetTop+10>=0){ nume.style.top=0+'px'; kdeme.ctn.onclick=kdeme.retour; return false; } nume.style.top=nume.offsetTop+10+'px'; setTimeout(kdeme.aller,10); }, retour:function(){ var nume=kdeme.general; if(nume.offsetTop-10<=-(nume.offsetHeight)){ nume.style.top=-nume.offsetHeight+'px'; kdeme.ctn.onclick=kdeme.aller; return false; } nume.style.top=nume.offsetTop-10+'px'; setTimeout(kdeme.retour,10); }, //creation du bandeau et tout ce qu'il contient init:function(){ var elem3=document.body.getElementsByTagName('div'); for (var i=0;i<elem3.length;i++){ if(elem3[i].parentNode.tagName=='BODY'){ kdeme.tbel.push(elem3[i]); } } kdeme.general=document.createElement('div'); kdeme.general.setAttribute('class','masthead') kdeme.elnav=document.createElement('nav'); kdeme.elnav.setAttribute('class','scrollnav') //remplacement getelementByClassName pour pouvoir supporter ie8 ////////////// var classel=document.body.getElementsByTagName('*'); var tab= new Array for (var j=0;j<classel.length;j++){ if(classel[j].className=='ktitre'){ tab.push(classel[j]); } } for (var i=0;i<tab.length;i++){ var il=document.createElement('span'); var txt=tab[i].firstChild.nodeValue; var t=document.createTextNode(txt); il.appendChild(t); il.setAttribute('onclick','kdeme.kasco('+i+')'); kdeme.elnav.appendChild(il); } /////////////////// kdeme.general.appendChild(kdeme.elnav) var btt= ['kdeme.suite()','kdeme.kasco("pagea")','kdeme.fin()','kdeme.aller()','kdeme.deb()','kdeme.kasco("pager")','kdeme.preced()'] var btu= ['res/suiv.png','res/psa.png','res/end.png','res/ctr.png','res/start.png','res/psr.png','res/preced.png'] var elemx=document.createElement('div'); elemx.setAttribute('class','touche') for (var i=0 ;i<7 ;i++){ var elem2=document.createElement('img'); i<3 ? elem2.setAttribute('class','kbg') :elem2.setAttribute('class','kbd') if(i==3){ elem2.setAttribute('class','contenu') kdeme.ctn=elem2 } elem2.src=btu[i] elem2.setAttribute('onclick',btt[i]); elemx.appendChild(elem2) } kdeme.general.appendChild(elemx) document.body.appendChild(kdeme.general) kdeme.general.style.top=-kdeme.general.offsetHeight+'px'; typeof window.addEventListener == 'undefined' ? attachEvent("onscroll",kdeme.marchar) : document.addEventListener("scroll",kdeme.marchar, false); kdeme.marchar(); } } typeof window.addEventListener == 'undefined' ? attachEvent("onload",kdeme.init) : addEventListener("load",kdeme.init, false);
13 juin 2013 à 20:13
J'ai mis ça un peu de côté, car j'ai eu une urgence, mais je m'y re-penche ce weekend.
JJDai
12 juin 2013 à 23:36
11 juin 2013 à 15:54
j'ai mis un autre zip avec un adaptation pour un tableau:
http:// jubile.fr/_jjd/scrp/scroll-page-vertical-tbl.zip
J'ai modifier l'approche de recherche des sections.
En gros j'ajoute un attribut section au balise TD que je veux définir comme une section.
C'est nickel, et du coup c'est peut-être plus facile à adapter pour d'autres cas.
J'ai toujours mon décalage a propos de la liste des liens quand on clique sur le bouton central, mais ta modif corrige peut être le défaut, je répercute tes modifs chez moi pour voir.
JJDai
11 juin 2013 à 15:01
11 juin 2013 à 13:02
"Peux-tu me confirmer que le défilement par section est calculé par la hauteur du div de la section"
oui c'est sa je prend la position de la barre de scroll puis celle du div dans la page je fait une soustraction ce qui me donne la distance a parcourir
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.