jScrollPane scrolling on element drag

Question

Sto provando a scorrere evidenziando il testo e trascinando verso il basso. Ora, come probabilmente sapete, questo è un comportamento standard predefinito per un elemento standard overflow: auto, tuttavia sto provando a farlo con alcune fantasiose barre di scorrimento per gentile concessione di jQuery jScrollPane di Kelvin Luck.

ho creato un violino qui: DEMO

fondamentalmente come si può vedere, mettendo in evidenza e lo scorrimento opere nella casella in alto (la casella predefinita overflow: auto), ma nel secondo non e, a complicare le cose, una volta raggiunto il fondo, INVERTI la tua selezione!

Quindi, la mia domanda è (sono) questa (queste): c'è un modo per risolvere questo problema? Se é cosi, come?

UPDATE

Ho lavorato su questo un po 'e ho trovato una leggera soluzione utilizzando setTimeout()

tuttavia, non funziona come previsto e se qualcuno è disposto ad aiutare Ho biforcuta a un nuovo violino qui: jsFiddle

il codice stesso è:

pane = $('#scrolldiv2'); 
pane.jScrollPane({animateEase: 'linear'}); 
api = pane.data('jsp'); 

$('#scrolldiv2').on('mousedown', function() { 
    $(this).off().on('mousemove', function(e) { 
     rel = $(this).relativePosition(); 
     py = e.pageY - rel.y; 
     $t = $(this); 
     if (py >= $(this).height() - 20) { 
      scroll = setTimeout(scrollBy, 400, 20); 
     } 
     else if (py < 20) { 
      scroll = setTimeout(scrollBy, 400, -20); 
     } 
     else { 
      clearTimeout(scroll); 
     } 
    }) 
}).on('mouseup', function() { 
    $(this).off('mousemove'); 
    clearTimeout(scroll); 
}) 

var scrollBy = function(v) { 
    if (api.getContentPositionY < 20 & v == -20) { 
     api.scrollByY(v + api.getContentPositionY); 
     clearTimeout(scroll); 
    } else if (((api.getContentHeight - $t.height()) - api.getContentPositionY) < 20 & v == 20) { 
     api.scrollByY((api.getContentHeight - $t.height()) - api.getContentPositionY); 
     clearTimeout(scroll); 
    } else { 
     api.scrollByY(v, true) 
     scroll = setTimeout(scrollBy, 400, v) 
    } 
} 

$.fn.extend({ 
    relativePosition: function() { 
     var t = this.get(0), 
      x, y; 
     if (t.offsetParent) { 
      x = t.offsetLeft; 
      y = t.offsetTop; 
      while ((t = t.offsetParent)) { 
       x += t.offsetLeft; 
       y += t.offsetTop; 
      } 
     } 
     return { 
      x: x, 
      y: y 
     } 
    }, 
})​ 

Answer 1

Devi solo scorrere verso il basso/verso l'alto a seconda di quanto il mouse è vicino alla fine del div; non è buono come la soluzione nativa, ma ottiene il lavoro fatto (http://jsfiddle.net/PWYpu/25/)

$('#scrolldiv2').jScrollPane(); 

var topScroll = $('#scrolldiv2').offset().top, 
    endScroll = topScroll + $('#scrolldiv2').height(), 
    f = ($('#scrolldiv2').height()/$('#scrolldiv2 .jspPane').height())*5 , 
    selection = false, 
    _prevY; 

$(document).mousemove(function(e){ 
    var mY; 
    var delta = _prevY - e.pageY; 
    if((e.pageY < endScroll && (mY = ((e.pageY - endScroll + 80)/f)) > 0) || 
     (e.pageY > topScroll && (mY = (e.pageY - (topScroll + 80))/f) < 0)){ 
      if(selection && (delta > 10 || delta < -10)) 
      $('#scrolldiv2').data('jsp').scrollByY(mY, false) ; 
    } 
}) 

$('#scrolldiv2').mousedown(function(e){_prevY = e.pageY; selection = true ;}) 
$(window).mouseup(function(){selection = false ;})​ 

---

A proposito, la ragione per cui inverte la selezione è perché ha raggiunto la fine del documento, basta mettere un po 'di spazio bianco laggiù e problema risolto.

Answer 2

Odio davvero dirlo, so che è un problema anche se mi sono imbattuto nell'aggiornamento di questo plugin, ma nel vecchio plug-in (seen here) funziona perfettamente con la chiamata di base. Quindi ho appena ripristinato la mia copia.