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

您好我使用jqueryui /可调整大小的<div id="blue">元素包含子元素<div id="red">与一些内部html文本内容。蓝色是$(".resizable").resizable();，我希望滚动条出现，如果我调整比红色的内容小的蓝色。防止ui调整大小的句柄自动触发溢出滚动条

问题是由于类.ui-resizable-s .ui-resizable-e滚动条总是可见的。

只要看看这个的jsfiddle https://jsfiddle.net/662tyqv8/4/

如果我现在躲在的jsfiddle水平和垂直手柄，它的工作原理（溢出滚动条只在那里，如果需要的。

如果我看的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表明水平手柄是蓝色<div>的区域之外，因此它奥波atically增加了滚动条

来源

2016-07-28 McRingRing

欢迎堆栈溢出。当你说'只有当我真的隐藏一些红色的背景时，我才想拥有句柄和滚动条'对我来说没有任何意义。 – Twisty

嗨，我改变了这个问题，我希望'ui-resizable handles'不会自动触发溢出滚动条 – McRingRing

您需要在这里显示包含问题的最小代码示例，而不是可能会更改的第三方网站或明天消失，未来无人帮助。 – Rob

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

来源

2016-08-01 16:10:59 Twisty

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

回答

相关问题