Как прокрутить документ с помощью изменения размера div (jquery ui)?

Question

Я использую плагин jquery resizable с настраиваемой ручкой. Я хочу прокрутить сайт вниз, когда дескриптор достигнет нижней части окна - в идеале, как работает перетаскиваемый плагин, при перетаскивании divs за пределы видимой области документа. Я изменяю размер только вдоль оси y, используя дескриптор «s».

UPDATE: jsfiddle доступна здесь: http://jsfiddle.net/yazgY/10/

До сих пор изменение размера работает отлично:

$(function() { 
    $("#mask_container").resizable({handles: {'s': '#button'}}); 
}); 

Базовая структура HTML выглядит следующим образом:

<div id="mask_container" class="ui-widget-content"> 
    <div id="mask"></div> 
    <div id="button" class="ui-resizable-handle ui-resizable-s"></div> 
</div> 

Я пытался реализовать части кода из draggable, который отвечает за прокрутку, но пока не повезло :(

Answer 1

Вы можете использовать метод scrollTop для достижения этого эффекта после прекращения события изменения размера. Попробуйте это:

JS

$("#mask_container").resizable({ 
    handles: { 
     's': '#button' 
    }, 
    stop: function(event, ui) { 
     var viewportHeight = $(window).height(); 
     var masContainerHeight = ui.size.height; 

     if (masContainerHeight > viewportHeight) { 
      $("html, body").animate({ 
       scrollTop: $(document).height() - $(window).height() 
      }); 
     } 
    } 
}); 

Демо: http://jsfiddle.net/yazgY/11/