Scroll container if resizable div reaches container border

Question

I have a div with some divs inside and a div which is resizable.

Please look at this fiddle: fiddle

If I place the mouse somewhere in the div and start selecting an area f.ex. towards the bottm, the container starts scrolling when the mouse reaches the bottom border. Try it by selecting some of the white divs.

But this does not happen if I resize the resizable div. I would like to get the same effect as described above in this case.

<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

This can be achieved using some javascript. With the starting point being f.ex. the bottom resizer of the control, you can implement an interval function that checks the mouse position and starts a scrolling, like this:

$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);
});