绝对位置元素内的固定位置元素

Question

我在某些元素上使用 JQuery UI Draggable 和 Resizable，但是有时内容对于元素来说太大了，我希望它滚动。

我已经设法使用 H3 元素实现了预期的结果，因为无论您在哪里拖动或调整大小，它都保持在原位（尽管任何关于如何使其不覆盖滚动条的提示都会很棒！）。

但是，当尝试在可拖动和可调整大小的 ui 元素上执行此操作时，它们会转到整个文档窗口（我理解预期的网络行为）。我在我的小提琴上用蓝色背景注释了这个

基本上，当您向下/向上滚动时，我希望拖动和调整大小手柄保持在右下角，但我似乎无法实现。

看这个：

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

如果您将此 CSS 添加到小提琴中：

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

当您拖动它时，它确实使调整大小处理程序随面板一起移动，但它不在正确的位置...

Answer 1

我更新了小提琴：http://jsfiddle.net/cL5kh/9/

看看这个部分，我使用 scroll() 和 scrollTop() 函数来重新定位调整大小的图标：

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