在调整大小的同时在容器中显示已调整大小的元素的结尾并溢出

这个问题听起来很奇怪，抱歉，如果没有多大意义...我有一个可调整大小的元素在溢出的容器中：滚动。如果我调整元素的大小，鼠标最后离开容器，滚动条开始增长。这对我的目的并不理想，因为我需要永久查看调整大小的元素的端点。是否可以将鼠标放在容器中，同时调整大小，以便始终可以看到调整大小的元素的末端？在调整大小的同时在容器中显示已调整大小的元素的结尾并溢出

<script src="Scripts/jquery-1.10.1.min.js"></script> 
<script src="Scripts/jquery-ui.js"></script> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     $("#child").resizable({ 
      resize: function (event, ui) { 

      }, 
      start: function (event, ui) { 
       $("#child").css({ 
        position: "relative !important", 
        top: "0 !important", 
        left: "0 !important" 
       }); 
      }, 
      stop: function (event, ui) { 
       $("#child").css({ 
        position: "", 
        top: "", 
        left: "" 
       }); 

      } 
     }); 
    }); 

</script> 

<style type="text/css"> 

    #parent { width:250px; height:250px; background-color:yellow; border: 1px solid gray; position:relative; overflow-y:scroll; } 
    #child { width:220px; height:220px; background: rgba(200, 54, 54, 0.5); border: 1px solid gray; top:0px; } 

    .ui-resizable { position: relative;} 
    .ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; } 
    .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } 
    .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } 
    .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } 
    .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } 
    .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } 
    .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } 
    .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } 
    .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } 
    .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;} 
</style> 

<form id="form1" runat="server"> 
<div>  
    <div id="parent"> 
     <div id="child"></div> 
    </div>    
</div> 
</form>

来源

2013-07-22 AGuyCalledGerald

这里是这个小提琴：http://jsfiddle.net/hHSTu/1/ – Brewal

谢谢你，伟大的工作，Brewal – AGuyCalledGerald

你不能强迫鼠标停留在父里面，但你可以自动滚动看到孩子的右下角调整大小时：

resize: function (event, ui) { 
    $('#parent').scrollTop($('#child').height()); 
    $('#parent').scrollLeft($('#child').width()); 
}

看到这个Fiddle

来源

2013-07-22 13:10:25 Brewal

谢谢你让我回到这个想法。我不知道为什么我忽略它，但它对我的需求是完美的。 – AGuyCalledGerald

在调整大小的同时在容器中显示已调整大小的元素的结尾并溢出

回答

相关问题