11540 sujets

JavaScript, DOM et API Web HTML5

Hello à tous,

J'essaie de faire un scroll en JS, car le scrollbar standard n'est pas terrible. Bref… mon code marche très bien sur Sarafi, mais sur Firefox, c'est pas terrible : on clique, on déplace, on déclique : OK. Mais si on reclique et on redéplace, ça a tendance à foirer.

Je n'ai rien trouver sur le sujet. C'est sûrement un erreur à la c** mais ça fait deux jours que je cherche et j'arrive pas à mettre la main dessus. Alors je m'invoque l'aide des maîtres Smiley smile

Voici le code, commenté :


<script type="text/javascript">

var monCurseur = null;
var maTracklist = null;
var posInitClick = null;
var posInitCurs = 0;						// le curseur est une div style="position:relative; top:0";
var deplaCurs = null;
var depassement = null;

onScrollMouseDownHandler = function(event, nombrePistes) {									// sur le mousedown
	var hauteurBloc = 55*nombrePistes;															// on calcule la hauteur du contenu à scroller
	depassement = hauteurBloc - 330;															// et la hauteur de la partie cachée qui déterminera la hauteur max du scroll
	
	if (nombrePistes > 6) {
		monCurseur = document.getElementById('curseurB'); 										// Le curseur du scroll que l'on drag avec la souris
		maTracklist = document.getElementById('movingTracklist'); 								// le contenu qui va scroller à l'intérieur d'uve div overflow:hidden
		posInitClick = event.clientY; 															// on enregistre la position de la souris au début du scroll
		posInitCurs = window.getComputedStyle(monCurseur, null).getPropertyValue("margin-top"); // la position du curseur au début du scroll
		posInitCurs.replace("px", ""); 															// bon c'est pas très catholique, mais pour faire des soustraction, mieux vaut tout passer en INT [smile]
		posInitCurs = parseInt(posInitCurs);
		document.addEventListener('mousemove', onMouseMoveHandler, false); 						// on écoute le déplacement de la souris
		document.addEventListener('mouseup', onScrollUpHandler, false); 						// et le relachement du bouton pour arrêter le scroll 
	}
}
	
onMouseMoveHandler = function(event){															// lorsque la souris bouge
	deplaCurs = event.clientY-posInitClick; 														// on calcule le déplacement de la souris, et donc du curseur, entre la position actuelle et la position initiale de la souris au moment du mouseDown
	posFinCurs = posInitCurs + deplaCurs; 															// on calcule la nouvelle position du curseur
	if (posFinCurs > 0 && posFinCurs < 310){ 														// tant que le curseur ne sort pas des limites
		monCurseur.style.marginTop = posFinCurs + 'px';												// on deplace le curseur en hauteur
		maTracklist.style.marginTop = Math.round(-posFinCurs*depassement/310) + 'px';				// ainsi que le contenu proportionnellement [tiens, pourquoi le commentaire ne marche pas ?]
	}																							
}

var onScrollUpHandler = function(event) {														// lorsqu'on relache le bouton de la souris
	document.removeEventListener('mousemove', onMouseMoveHandler, false);							// on enlève l'écouteur sur le mousemove
	if (posFinCurs<10){																				// si le curseur est à moins de 10 pixels de la position haute
		monCurseur.style.marginTop = 0;																	// on le colle en haut
		maTracklist.style.marginTop = 0;																// idem pour le contenu	
	}
	else if (posFinCurs>300) {																		// si le curseur est à moins de 10 pixels de la position basse
		monCurseur.style.marginTop = '310px';															// on le colle en bas
		maTracklist.style.marginTop = -depassement + 'px';												// idem pour le contenu
	}
}

</script>



Je répète que ça marche bien sur Safari Smiley confus

Merciiii