5

テキストを強調表示してドラッグしてスクロールしようとしています。あなたが気づいているように、これは標準のoverflow: auto要素の標準的な動作ですが、私はKelvin LuckのjQuery jScrollPaneの礼儀正しいスクロールバーでそれをしようとしています。jScrollPane要素のスクロール

私はここにフィドル作成しました:トップボックス(デフォルトoverflow: autoボックス)で作品をハイライト表示し、スクロール、基本的にあなたが見ることができるようDEMO

をしかし、第二に、それは問題を配合すること、ないと、一度底に達すると、それはあなたの選択をINVERTS!

私の質問はこれです(これです):これを修正する方法はありますか?もしそうなら、どうですか?

私はかなりこれに取り組んできたとsetTimeout()

しかし使用してわずかな解決策を見つけた

は、それが意図したとおりに動作しないと、誰もが喜んでいる場合、私は持って支援することUPDATEここに新しいフィドルにそれをフォーク:jsFiddle

コードそのものです:

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 
     } 
    }, 
})​ 

答えて

3

divの最後までのマウスの近さに応じて上下にスクロールするだけです。ところで、それは選択を反転させた理由は、それが文書の終わりに達したため、単にいくつかの空白を入れている


ネイティブソリューションほど良好ではないが、それは仕事が行われます(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 ;})​ 
問題が解決しました。

+0

素晴らしい、あなたは実際に私の頭痛をクリアしました!ありがとう!私がそれを見ると、それはとてもシンプルですが、何か別のやり方をしようとしているときは、言いたいことをするのは難しいでしょう! –

0

私はそれを言うのが大嫌いです。私はこのプラグインのアップデートで遭遇してもそれが問題だと知っていますが、古いプラグイン(seen here)では基本的な呼び出しでうまく動作します。だから私は私のコピーを元に戻しました。

+0

かなりのことをするためにAPIを使用しているので、私はむしろ元に戻しません。私はちょうどハイライト/ドラッグで実際にスクロールすることを前提としました...まあ、私はコードのセクションを見つけましたので、おそらく自分自身に機能を追加し、githubでプルリクエストを送信する必要があります。 –

関連する問題