javascript 带有滚动条的 jQuery ui ReSizable
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3858460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery ui ReSizable with scroll bars
提问by Shishant
I am trying to have a resizable on a div, but the resizer handle is always contained within the div can I have it where scrollbars end.
我试图在 div 上调整大小，但调整器句柄总是包含在 div 中，我可以在滚动条结束的地方使用它吗？
/////////// Edit ///////////
/////////// 编辑 ///////////
I have achieved it with jScrollPane but after using jScroll I am unable to resize horizontally.
demo http://i53.tinypic.com/906rk9.png
我已经使用 jScrollPane 实现了它，但是在使用 jScroll 之后我无法水平调整大小。
演示 http://i53.tinypic.com/906rk9.png
回答by Dr.Molle
It should work, if you put a wrapper around the element to be resized, and make this wrapper resizable.
如果您在要调整大小的元素周围放置一个包装器，并使该包装器可调整大小，它应该可以工作。
I was playing around with that idea and this result seems to work:
我正在考虑这个想法，这个结果似乎有效：
<script>
$(document).ready(function() {
$(".resizable")
.wrap('<div/>')
.css({'overflow':'hidden'})
.parent()
.css({'display':'inline-block',
'overflow':'hidden',
'height':function(){return $('.resizable',this).height();},
'width': function(){return $('.resizable',this).width();},
'paddingBottom':'12px',
'paddingRight':'12px'
}).resizable()
.find('.resizable')
.css({overflow:'auto',
width:'100%',
height:'100%'});
});
</script>
回答by Dzenly
jQuery UI team considers scrollable resizable div as a bad design. So it is "won't fix feature: http://bugs.jqueryui.com/ticket/9119Workaround as Dr.Molle already stated - resizable wrapper for scrollable div.
jQuery UI 团队认为可滚动的可调整大小的 div 是一种糟糕的设计。所以它是“不会修复功能： http://bugs.jqueryui.com/ticket/9119 Dr.Molle 已经说过的解决方法 - 可滚动 div 的可调整大小的包装器。
回答by Ajsti.pl - Maciej Szewczyk
Check option http://api.jqueryui.com/resizable/#option-alsoResize
检查选项http://api.jqueryui.com/resizable/#option-alsoResize
This works for me
这对我有用
$(".responsive-table th").resizable({
handles: "e",
containment: 'document',
alsoResize: ".responsive-table table"
});
