Question

I created a draggable div with scroll (to create scroll I used jquery plugin named: nicescroll ver. 2.9.2) but the scroll doesn’t work correctly.

Everything is ok until I move the div to the different location. When I’m moving the div, scroll is staying on the old position.

On the begining I worked with custom scroll and there was no problem. The problem is when I used nicescroll plugin.

  $(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

my structure of the divs is:

  <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> 

Answer 1

I found one resultion…
After moving the div I have to reload the scroll, to do it I can use function: getNiceScroll().resize() (I didn’t found function like: reload() or sth like this)

It is better to hide the scroll during the move so you will not see latency between moving div and realoading scroll. To hide and show scroll I used: getNiceScroll().hide() and getNiceScroll().show()

The code is:

$(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

This is not the perfect resolution because if you are moving div very fast you can see the scroll in different locations.