jScrollPane desplazamiento en elemento arrastrar

Question

Estoy intentando desplazarme resaltando texto y arrastrando hacia abajo. Ahora, como probablemente sabrá, este es el comportamiento predeterminado estándar para un elemento estándar overflow: auto, sin embargo, estoy tratando de hacerlo con algunas elegantes barras de desplazamiento cortesía de jQuery jScrollPane de Kelvin Luck.

He creado un violín aquí: DEMO

básicamente como se puede ver, destacando las obras y el desplazamiento en el cuadro de la parte superior (la caja por defecto overflow: auto) pero en la segunda no y, a empeorar las cosas, ¡una vez que llegas al fondo INVERTIRÁ tu selección!

Entonces, mi pregunta (s) es (son) esto (estas): ¿hay alguna manera de arreglar esto? ¿Si es así, cómo?

ACTUALIZACIÓN

He estado trabajando en esto un poco y he encontrado una ligera solución utilizando embargo setTimeout()

, que no funciona según lo previsto y si alguien está dispuesto a ayudar tengo bifurcada a un nuevo violín aquí: jsFiddle

el propio código es:

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

Simplemente tiene que desplazarse hacia abajo/arriba dependiendo de qué tan cerca esté el mouse del final del div; no es tan buena como la solución nativa pero hace el trabajo (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 ;})​ 

---

Por cierto, la razón por la que invierte la selección se debe a que ha llegado al final del documento, sólo hay que poner un poco de espacio en blanco allí abajo y problema resuelto.

Answer 2

Realmente odio decirlo, sé que es un problema incluso me encontré con la actualización de este complemento, pero en el antiguo complemento (seen here) funciona perfectamente con llamadas básicas. Así que solo revertí mi copia.