JQuery draggable will not automatically scroll iframe to bottom

I have an iframe with multiple draggable divs inside. When dragging items, I want the iframe to automatically scroll up and down when needed, however it currently only scrolls to the top. I tried it with the scroll option set to true, however it doesn't work.

The iFrame page is the following repeating to allow scrolling of the page ( https://jsfiddle.net/zhm6qjaz/ ):

<div class="block-style">
    Header
</div>

      

        
        
        
      

    

Homepage code ( https://jsfiddle.net/huLr2zkv/ ):

<iframe id="editor-frame" src="https://jsfiddle.net/zhm6qjaz/show" style="height:500px; width:100%; border:none;"></iframe>
<script>$(document).ready(function() {

    $('#editor-frame').load(function (event) {

        var iframe = $('#editor-frame').contents();

        iframe.find('.block-style').draggable({
            delay: 200,
            helper: "clone",
            iframeFix: true,
            iframeOffset: $('#editor-frame').offset(),
            appendTo: 'parent.body',
            start: function (event, ui) {
                $(this).addClass('selected');
            },
            drag: function (event, ui) {
            },
            stop: function (event, ui) {
                $(this).removeClass('selected');
            }
        });

        iframe.find('.block-style', window.top.document).droppable({
            tolerance: "pointer",
            iframeFix: true,
            over: function (event, ui) {
            },
            out: function (event, ui) {               
            },
            drop: function (event, ui) {
            }
        });

    });

});</script>

      

        
        
        
      

    

I'm not sure what else to try, I'm guessing this is not the expected behavior and that when dragged into an iframe it should automatically scroll?