Question

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

<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>

Answer 1

您无法强制鼠标停留在父级内部，但您可以在调整其大小时自动滚动以查看该子项的右下角：

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

请参阅此Fiddle

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

1 个答案: