Dynamic droppable issue

I am having a list of fruits and each element in this list is draggable. I can drag and drop it in the basket element, which contains element that is droppable. In idle situation the droppable is hidden and shows only when drag started. All going good until there is a page scroll appears, and then the calculation of the draggable probably going wrong and drop box cannot be reached with cursor:

$('ul.fruits li').draggable({
    cancel: 'a.ui-icon'
  , revert: 'invalid'
  , containment: 'document'
  , helper: 'clone'
  , cursor: 'move'
  , refreshPositions: true
  , start: function (event, ui) {
      $('li.drop').show();
  }
  , stop: function (event, ui) {
      $('li.drop').hide();
  }
  , refreshPositions: true }).on('scroll', function() {
        $('.basket').scrollTop($(this).scrollTop());
    });

$('ul.basket li.drop').droppable({
      accept: 'li'
    , activeClass: 'ui-state-highlight'
    , hoverClass: 'ui-state-active'
    , greedy: true
    , refreshPositions: true
    , drop: function (event, ui) {
        $(this).parent().prepend('<li>' + ui.draggable.context.innerHTML + '</li>');
    }});

This is the code example I used to describe the problem.