Fixed position element inside absolute position element

Question

I'm using JQuery UI Draggable and Resizable on some elements, however sometimes the content will be too large for the element and I want it to scroll.

I have managed to achieve the desired result with the H3 elements as it stays in position no matter where you drag or resize (although any tips on how to make it not cover the scroll bar would be grand!).

However when trying to do this on the draggable and resizable ui elements they go to the whole document window (expected web behavior I understand). I annotated this on my fiddle with blue background

Basically as you're scrolling down/up, I want the drag and resize handles to stay at the bottom right but I can't seem to achieve it.

See this:

$('.panel').each(function() {
  $(this).draggable({
    handle: 'h3',
    containment: 'parent',
    snap: true
  });
  $(this).resizable({
    containment: 'parent',
    minHeight: 100,
    minWidth: 200
  });

  // Make the heading fixed and full width
  var h3 = $(this).children('h3');
  var content = $(this).children('.panelcontent');
  h3.width(h3.width());
  h3.css('position', 'fixed');
  content.css('margin-top', h3.outerHeight(true) + 'px');
  $(this).on('resize', function(event, ui) {
    var me = $(this);
    var myh3 = me.children('h3');
    myh3.outerWidth(me.innerWidth());
  });
});

html,
body {
  height: 90%;
  width: 90%;
}

body {
  font-size: 62.5%
}

#area {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  position: relative;
}

.panel {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  overflow: auto;
  position: absolute;
}

h3 {
  background-color: #ff6600;
  cursor: move;
  margin: 0;
  font-size: 1.5em;
  padding: 5px;
}

.panelcontent {
  padding: 5px;
  font-size: 1.1em;
}

#panel2 {
  left: 50%;
  top: 50%;
}

#panel2 .ui-resizable-handle {
  position: fixed;
  background-color: rgba(0, 0, 255, 0.5);
}

.ui-resizable-e {
  right: 0 !important;
}

.ui-resizable-s {
  bottom: 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="area">
  <div id="panel1" class="panel">
    <h3> Panel 1 </h3>
    <div class="panelcontent"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et nibh in tellus auctor feugiat rutrum vitae quam. Morbi sodales augue nec tortor suscipit dignissim. Curabitur orci justo, consequat pulvinar eleifend et, fringilla nec nisi. Curabitur
      adipiscing adipiscing varius. </div>
  </div>
  <div id="panel2" class="panel">
    <h3> Panel 2 </h3>
    <div class="panelcontent"> Donec mollis nulla nec dolor sagittis malesuada. Proin a tellus dui. Donec eleifend ipsum at justo vehicula tempus. Proin convallis ullamcorper nibh, sit amet viverra quam aliquam a. Nullam mollis pulvinar tempus. Nulla facilisi. Phasellus eget mi
      varius, sollicitudin lorem ac, hendrerit mi. </div>
  </div>
</div>

If you add this CSS to the fiddle:

#panel2 .ui-resizable-se {
   right: auto;
   bottom: auto;
}

It does make the resize handler move with the panel when you drag it, but it's not in the correct place...

Answer 1

I updated the fiddle: http://jsfiddle.net/cL5kh/9/

Take a look at this section, where i use the scroll() and scrollTop() function to reposition the resize icon:

    $('.panel').scroll(function(){
      var fromTop = $('.panel').scrollTop();
      $(this).find('.ui-resizable-se').css({
        marginBottom: '-'+fromTop+'px'
      });
    });