Comment étendez-vous le jScrollPane pour les événements hover?

Question

Suite à l'exemple trouvé here

Je veux obtenir le jScrollPane pour faire défiler lorsque la souris est maintenu enfoncé. Ma raison pour cela est que je peux faire mes propres boutons fléchés. Je voudrais qu'ils soient en dehors du volet de défilement en haut et en bas avec la même largeur de la vitre.

Je sais comment faire fonctionner les boutons sur un événement jquery mousehover et mousedown, mais le volet ne défile ensuite qu'une seule fois. Je veux lui donner une valeur de Y, environ 20, et l'obtenir pour continuer à vérifier si mousedown est toujours vrai etc.

Mais rien que j'essaye ne semble fonctionner.

Answer 1

Vous devrez configurer un temporisateur d'intervalle qui se déclenche à plusieurs reprises lorsque la souris est sur votre bouton. Vous pouvez obtenir des conseils sur la façon de le faire en regardant comment les boutons fléchés fonctionnent dans le code JScrollPane:

https://github.com/vitch/jScrollPane/blob/master/script/jquery.jscrollpane.js#L503

Voici quelques exemples de code qui fait la même chose à l'extérieur du plug-in:

var api = $('.scroll-pane').jScrollPane().data('jsp'); 
$('#hover-down').bind(
    'mouseover', 
    function() 
    { 
     var scrollInterval, 
      link = $(this), 
      doScroll = function() 
      { 
       api.scrollByY(5); 
      }; 
     link.bind(
      'mouseout.demo', 
      function() 
      { 
       clearInterval(scrollInterval); 
       link.unbind('mouseout.demo'); 
      } 
     ); 
     doScroll(); 
     scrollInterval = setInterval(doScroll, 50); 
    } 
); 

Vous pouvez le voir travailler et jouer avec elle dans ce jsFiddle: http://www.jsfiddle.net/WzNM4/1/