jQuery Girl
  1. jQuery Girl
  3. Comment faire défiler un clic avec la souris et le survol à l’aide de jQuery
Intereting Posts
Charger un tableau local en tant que fichier Ajax pour améliorer les performances Je n’arrive pas à faire fonctionner bxslider de base Une erreur TypeError non capturée dans jQuery provient-elle d’un conflit de code? jquery hover ne fonctionne pas sur les éléments de ma liste Evénement de clic jQuery avec désactivation / réactivation conditionnelle Optimiser la sortie de HTML2Canvas comment restreindre le sélecteur de date d’amorçage à partir d’une date future Comment stocker la réponse JSON dans jQuery? Afficher le formulaire modal avant que l’utilisateur ne quitte la page Comment append une barre de défilement aux tabs jQuery Jquery repeat set inteval à la fin de la fonction le rendu des données Highcharts sur l’axe x à intervalles réguliers jquery: soumettre un formulaire deux fois jQuery lorsque chacun est terminé, fonction de déclenchement Colorbox Lightbox – Supprimer la barre de défilement verticale d’un IFrame

Comment faire défiler un clic avec la souris et le survol à l’aide de jQuery

En utilisant le balisage ci-dessous, comment puis-je faire en sorte que le div “#content” défile vers le haut ou vers le bas lorsque je clique ou survole la balise d’ancrage “#scrollUp” ou “#scrollDown”. Le défilement doit être lisse de préférence. Si vous cliquez dessus, vous devrez faire défiler une quantité spécifique (pour les appareils tactiles) si vous passez la souris dessus, vous pourrez faire défiler jusqu’à mouseout. 

 #content { overflow:auto; height: 50px; /*could be whatever*/ }    
 
 
     
  • some content here
    •  
  • some content here
    •  
  • some content here
    •  
  • some content here
    •  
  • some content here
    •  
  • some content here
    •

Vous pouvez utiliser la fonction animate de jQuery pour obtenir un effet de défilement régulier sur un click ou un mouseover : 

 var step = 25; var scrolling = false; // Wire up events for the 'scrollUp' link: $("#scrollUp").bind("click", function(event) { event.preventDefault(); // Animates the scrollTop property by the specified // step. $("#content").animate({ scrollTop: "-=" + step + "px" }); }).bind("mouseover", function(event) { scrolling = true; scrollContent("up"); }).bind("mouseout", function(event) { // Cancel scrolling continuously: scrolling = false; }); $("#scrollDown").bind("click", function(event) { event.preventDefault(); $("#content").animate({ scrollTop: "+=" + step + "px" }); }).bind("mouseover", function(event) { scrolling = true; scrollContent("down"); }).bind("mouseout", function(event) { scrolling = false; }); function scrollContent(direction) { var amount = (direction === "up" ? "-=1px" : "+=1px"); $("#content").animate({ scrollTop: amount }, 1, function() { if (scrolling) { // If we want to keep scrolling, call the scrollContent function again: scrollContent(direction); } }); }

Exemple de travail: http://jsfiddle.net/andrewwhitaker/s5mgX/

(Vous devrez désactiver les événements mouseover et mouseout pour voir correctement les effets du gestionnaire d’événements click )

Comment ça marche:

  • Utilise la fonction animate mentionnée ci-dessus pour faire défiler en douceur d’un montant spécifié au clic.
  • Utilise un indicateur pour activer le défilement continu lorsque le gestionnaire d’événements mouseover du lien est appelé et désactiver le défilement lorsque le gestionnaire d’événements mouseout du lien.
  • Lorsque scrollContent est appelé, si l’indicateur de scrolling est toujours true fois l’animation terminée, animez à nouveau dans la même direction. Le paramètre de fonction de rappel de animate nous permet d’effectuer une action une fois l’animation terminée.

Essayez d’utiliser JavaScript au lieu de jQuery pour cette tâche. Google la fonction scrollBy() comme dans window.scrollBy()