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
Voici le code, commenté :
Je répète que ça marche bien sur Safari
Merciiii
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

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

Merciiii