Question

我有一个内部有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: ""
        });

    }
});
});

Answer 1

这可以使用一些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);
});

如果可调整大小的div到达容器边界，则滚动容器

1 个答案: