如何使用div大小（jquery ui）滾動文檔？

Question

我正在使用jquery可調整大小的插件與自定義句柄。當處理到達窗口底部時，我想要將網站向下滾動 - 理想情況下可拖動插件的工作方式，即將div拖到文檔的可見區域外。我只是沿着y軸調整大小，使用「s」手柄。

UPDATE：的jsfiddle avaible這裏：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

在resize事件停止後，您可以使用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/