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

杰米·巴克(Jamie Barker)

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

无论您在何处拖动或调整大小,我都可以通过H3元素将其保持在适当的位置上来达到预期的效果(尽管有关如何使其不覆盖滚动条的任何提示都非常棒!)。

但是,当尝试在可拖动和可调整大小的ui元素上执行此操作时,它们将转到整个文档窗口(据我了解,这是预期的Web行为)。我在我的小提琴上用蓝色背景注释了这个

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

看到这个:

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

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

ggzone

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

看一下本节,在这里我使用scroll()和scrollTop()函数来调整大小图标的位置:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在绝对定位的叠加层上方显示固定位置元素的子元素

来自分类Dev

了解绝对定位元素的默认位置

来自分类Dev

如何使用绝对位置来定位元素?

来自分类Dev

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

来自分类Dev

元素的固定位置?

来自分类Dev

对齐元素中心,保持绝对位置

来自分类Dev

表单元素的绝对位置被忽略

来自分类Dev

从相对位置更改为固定位置,无需移动元素

来自分类Dev

Elm-元素的绝对位置

来自分类Dev

如何在可滚动的div元素内使用CSS绝对位置

来自分类Dev

相对位置/绝对位置并提供绝对坐标的最近祖先元素的名称

来自分类Dev

绝对位置元素未显示

来自分类Dev

CSS:位置固定在绝对位置

来自分类Dev

了解绝对定位元素的默认位置

来自分类Dev

浮动元素被绝对位置div裁剪

来自分类Dev

jQuery-将元素在容器内的绝对位置和旋转随机化

来自分类Dev

查询元素的绝对位置

来自分类Dev

Elm-元素的绝对位置

来自分类Dev

如何在可滚动的div元素内使用CSS绝对位置

来自分类Dev

列内的绝对位置

来自分类Dev

垂直居中,绝对位置,多个元素

来自分类Dev

位置元素内部绝对位置

来自分类Dev

绝对位置元素上的高度100%

来自分类Dev

相对位置不包含绝对定位元素

来自分类Dev

元素占据具有绝对位置的元素的空间

来自分类Dev

如何防止在元素位置从相对位置更改为固定位置时内容跳转

来自分类Dev

基于绝对位置元素的中心移动绝对位置元素

来自分类Dev

如何使用水平滚动设置在容器内具有绝对位置的父元素的 li 元素定位

来自分类Dev

对于没有固定/相对/绝对位置的元素,是否有 z-index 替代方案?

Related 相关文章

热门标签

归档