防止ui可调整大小的句柄自动触发溢出滚动条

Question

Hi I use jqueryui/resizable for a <div id="blue"> element that contains a child <div id="red"> with some inner html text content. The blue is $(".resizable").resizable(); and I want that scrollbars appear if I resize blue smaller than the content of red.

The problem is that because of the classes .ui-resizable-s .ui-resizable-e the scrollbars are always visible.

Just look at this JSFiddle https://jsfiddle.net/662tyqv8/4/

If I now hide the horizontal and vertical handles in the JSFiddle, it works ( the overflow scrollbars are only there if needed.

If I look at the DOM Tree, I understand why the scrollbars are always visible:

<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 shows that the horizontal handle is outside of the area of the blue <div> and therefore it automatically adds the scroll bar

Answer 1

This is done in resize where you compare the height of the two elements:

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");
       }
     }
   });
 });

You can also do this by add/removing a class or toggling a class.

.scrolling {
  overflow-y: auto;
}

Then do this when comparing:

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