jScrollPane cuộn trên phần tử kéo

Question

Tôi đang cố di chuyển bằng cách tô sáng văn bản và kéo xuống. Bây giờ, như bạn có thể nhận thức, đây là hành vi chuẩn, mặc định cho một phần tử tiêu chuẩn overflow: auto, tuy nhiên tôi đang cố gắng làm điều đó với một số thanh cuộn ưa thích lịch sự của jQuery jScrollPane bởi Kelvin Luck.

tôi đã tạo ra một fiddle đây: DEMO

cơ bản như bạn có thể thấy, làm nổi bật và di chuyển các công trình trong top box (mặc định overflow: auto hộp) nhưng trong lần thứ hai nó không và, hợp chất vấn đề, một khi bạn đạt đến phía dưới nó BAO GỒM lựa chọn của bạn!

Vì vậy, (các) câu hỏi của tôi là (là) này (đây): có cách nào để sửa lỗi này không? Nếu vậy, làm thế nào?

CẬP NHẬT

tôi đã làm việc về vấn đề này khá một chút và đã tìm thấy một giải pháp nhẹ sử dụng setTimeout()

tuy nhiên, nó không hoạt động như mong muốn và nếu ai sẵn sàng giúp tôi có chia hai nó vào một fiddle mới tại đây: jsFiddle

mã chính nó là:

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

Bạn chỉ cần cuộn xuống/lên tùy thuộc vào cách đóng chuột vào cuối div; là không tốt như các giải pháp tự nhiên nhưng nó được công việc làm (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 ;})​ 

---

BTW, lý do nó sẽ đảo ngược lựa chọn là bởi vì nó đạt đến kết thúc của tài liệu, chỉ cần đặt một số không gian trắng xuống đó và giải quyết vấn đề.

Answer 2

Tôi thực sự ghét phải nói nó, tôi biết đó là một vấn đề thậm chí tôi chạy vào với bản cập nhật cho plugin này, nhưng trong các plugin cũ (seen here) nó hoạt động tốt với cuộc gọi cơ bản. Vì vậy, tôi chỉ hoàn nguyên bản sao của mình.