2010-03-22 5 views
1

J'ai une étiquette div défilante (débordement). Maintenant, je voudrais utiliser la souris pour cliquer et maintenir et déplacer pour naviguer vers le haut et vers le bas (comme la fonction de curseur de la main dans Adobe Reader fonctionne).Javascript d'utiliser le clic de la souris pour naviguer?

Y at-il un script js pour y parvenir? Concrètement, j'utilise jquery, des plugins jquery pour y arriver?

Répondre

3

Ne sait pas les plug-ins, mais cela ne devrait pas être trop difficile:

$(function() { 
    $('#foo').mousedown(function(e) { 
     var start = e.pageY; 
     var startPos = $(this).scrollTop(); 
     var el = $(this); 

     $().mousemove(function(e) { 
      var offset = start - e.pageY; 
      el.scrollTop(startPos + offset); 
      return false; 
     }); 

     $().one('mouseup', function(e) { 
      $().unbind(); 
     }); 

     // Only if you want to prevent text selection 
     return false; 
    }); 
}); 

Un exemple de travail se trouve ici:

http://www.ulmanen.fi/stuff/mousescroll.php

+0

Grand. Exactement ce que je cherche. Merci beaucoup! – huy

+0

Maintenant, vous avez un autre problème en essayant de placer une autre boîte div sur #foo (plus grand z-index). Le code fonctionne aussi pour cette boîte de div. Savez-vous comment supprimer cela? – huy

+0

Vous devez arrêter la propagation d'événement à partir des éléments imbriqués - lorsque vous cliquez sur un élément imbriqué, l'événement mousedown est propagé à l'élément '#foo'. Un moyen facile de résoudre ceci est d'utiliser '$ ('# foo *'). Click (function() {return false;});'. Cet extrait arrête la propagation d'événements de tous les enfants de '#foo'. Cela peut ne pas être désiré dans tous les cas, mais devrait travailler pour vous. –

Questions connexes