javascript - 如何使用 div resize (jquery ui) 滚动文档？

Question

我正在使用带有自定义句柄的 jquery 可调整大小的插件。我想在句柄到达窗口底部时向下滚动站点 - 理想情况下，当将 div 拖动到文档的可见区域之外时，可拖动插件的工作方式。我只沿 y 轴调整大小，使用“s”句柄。

更新： 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>

我试图从负责滚动的可拖动代码中实现部分代码，但到目前为止没有运气:(

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/