javascript - 防止 ui-ressized 句柄自动触发溢出滚动条

Question

嗨，我使用 jqueryui/ressized <div id="blue">包含子元素 <div id="red"> 的元素带有一些内部 html 文本内容。蓝色的是$(".resizable").resizable();我希望如果我调整蓝色的大小小于红色的内容，就会出现滚动条。

问题是因为类 .ui-resizable-s .ui-resizable-e滚动条始终可见。

看看这个 JSFiddle https://jsfiddle.net/662tyqv8/4/

如果我现在隐藏 JSFiddle 中的水平和垂直 handle ，它就可以工作(溢出滚动条仅在需要时才出现。

如果我查看 DOM 树，我就会明白为什么滚动条始终可见:

<div id="blue" class="resizable ui-resizable">
    <div id="red">C<br>O<br>N<br>T<br>E<br>X<br>T</div>

    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div>
</div>

This picture 显示水平 handle 位于蓝色 <div> 区域之外因此它会自动添加滚动条

Answer 1

这是在 resize 中完成的，您可以在其中比较两个元素的高度:

https://jsfiddle.net/Twisty/mf52vhe5/

HTML

<div id="blue" class=" resizable">
  <div id="red">
    C
    <br>O
    <br>N
    <br>T
    <br>E
    <br>X
    <br>T
  </div>
</div>

CSS

#blue {
  width: 200px;
  height: 200px;
  background: blue;
  outline: 1px solid black;
  position: absolute !important;
  overflow-x: hidden;
  overflow-y: hidden;
}

#red {
  background: red;
}

jQuery

 $(function() {
   $(".resizable").resizable({
     resize: function(e, ui) {
       var blue = $("#blue");
       var red = $("#red");
       if (blue.height() < red.height()) {
         blue.css("overflow-y", "auto");
       } else {
         blue.css("overflow-y", "hidden");
       }
     }
   });
 });

您还可以通过添加/删除类或切换类来执行此操作。

.scrolling {
  overflow-y: auto;
}

然后在比较时这样做:

if (blue.height() < red.height()) {
    blue.addClass("scrolling");
} else {
    blue.removeClass("scrolling");
}