1

スクロールを使用してドラッグ可能なdivを作成しました（スクロールを作成するには、nicescroll ver。2.9.2という名前のjqueryプラグインを使用しました）が、スクロールが正しく機能しません。

divを別の場所に移動するまで、すべて問題ありません。divを移動しているとき、スクロールは古い位置に留まっています。

最初はカスタムスクロールで作業しましたが、問題はありませんでした。問題は、nicescrollプラグインを使用したときです。

  $(document).ready(function()
  {
    $('#title').hover(function() // when mouse is on the #title do:
      { 
        $('#window').draggable({ disabled: false }); // make window "draggable"
      }, function() // when mouse is out of the #title do:
      { 
        $('#window').draggable({ disabled: true }); // make window "un-draggable" 
      }
    ); // endhover
    $("#window_content").niceScroll({boxzoom:false}); // adding the scroll
  }); // end ready

私のdivの構造は次のとおりです。

  <div id="window">
    <div id="title"> </div> <!-- When mouse is on the div window is draggable -->
    <div id="window_content"> 
      This div have a scroll...
    </div> 
  </div>
4

2 に答える 2

1

結果が1つ見つかりました...divを移動した後、スクロールをリロードする必要があります。これを行うには、関数getNiceScroll（）。resize（）を使用できます（reload（）またはsthのような関数は見つかりませんでした）

divを移動してからスクロールを再ロードするまでの待ち時間が表示されないように、移動中はスクロールを非表示にすることをお勧めします。私が使用したスクロールを表示および非表示にするには：getNiceScroll（）。hide（）およびgetNiceScroll（）。show（）

コードは次のとおりです。

$(document).ready(function()
{
  $('#title').hover(function() // when mouse is on the #title do:
    {
      $('#window_content').getNiceScroll().hide(); //hide scroll
      $('#window').draggable({ disabled: false }); // make window "draggable"
    }, function() // when mouse is out of the #title do:
    { 
  $("#window_content").getNiceScroll().resize();  // preload scroll
      $('#window_content').getNiceScroll().show();  // show scroll
      $('#window').draggable({ disabled: true }); // make window "un-draggable" (turn off the draggable)
  }); // endhover
  $("#window_content").niceScroll({boxzoom:false}); // adding the scroll
}); // end ready

divを非常に速く移動している場合は、さまざまな場所でスクロールが表示されるため、これは完全な解決策ではありません。

于 2012-06-14T23:03:15.927 に答える
0

Nicescrollを取り除き、CSSoverflowプロパティを使用するのはどうですか？http://jsfiddle.net/Hfc6q/1/のコードに基づいて、この例を確認してください。

jQuery：

 $(document).ready(function()
  {
    $('#title').hover(function() // when mouse is on the #title do:
      { 
        $('#window').draggable({ disabled: false }); // make window "draggable"
      }, function() // when mouse is out of the #title do:
      { 
        $('#window').draggable({ disabled: true }); // make window "un-draggable" 
      }
    ); // endhover
  }); // end ready​

CSS：

#window_content
{
   overflow: scroll;
   width: 100px;
   height: 100px;
}

#title { width: 100px; }

divまた、window_contentに一致するようにタイトルの幅を設定する必要がある場合もありますdiv。

于 2012-06-14T17:21:10.530 に答える