0

我有一个 div 里面有一些 div 和一个可调整大小的 div。

请看这个小提琴：fiddle

如果我将鼠标放在 div 中的某个位置并开始选择一个区域 f.ex。朝向底部，当鼠标到达底部边框时，容器开始滚动。通过选择一些白色 div 来尝试。

但是，如果我调整可调整大小的 div 的大小，这不会发生。在这种情况下，我想获得与上述相同的效果。

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


.parent { width:250px; height:250px; background-color:white; border: 1px solid gray;   position:relative; overflow-y:scroll; }
#resizableChild { width:220px; height:100px; background: rgba(200, 54, 54, 0.5); border: 1px solid gray; top:0px;  }
.child { width:220px; height:50px; 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;}

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

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

    }
});
});
4

1 回答 1

0

这可以使用一些javascript来实现。起点是 f.ex。在控件的底部调整大小，您可以实现一个检查鼠标位置并开始滚动的间隔函数，如下所示：

$resizerBottom = $('#resizableChild').find('.ui-resizable-s');

var interval;
var mousePos;

$resizerBottom.mousedown(function (e) {
    mousePos = e.pageY;

    $(document).mousemove(function (e) {
        mousePos = e.pageY;
    });

    interval = setInterval(function () {

        //add scroll functionality here

    }, 10);
});
于 2014-03-03T10:15:21.043 回答