Question

您好我使用jqueryui / resizable来容纳包含内部html文本内容的子<div id="blue">的{{1}}元素。蓝色为<div id="red">，如果我将蓝色调整为小于红色内容，我希望显示滚动条。

问题在于，由于类$(".resizable").resizable();，滚动条始终可见。

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

如果我现在隐藏JSFiddle中的水平和垂直手柄，它可以工作（溢出滚动条只在需要时才存在。

如果我查看DOM树，我理解为什么滚动条始终可见：

.ui-resizable-s .ui-resizable-e

This picture 显示水平句柄位于蓝色<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>区域之外，因此会自动添加滚动条

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

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

1 个答案: