0

カスタムハンドル付きのサイズ変更可能なjqueryプラグインを使用しています。ハンドルがウィンドウの下部に達したときにサイトを下にスクロールしたいのですが、理想的には、ドキュメントの表示領域の外側にdivをドラッグするときに、ドラッグ可能なプラグインが機能する方法です。「s」ハンドルを使用して、y軸に沿ってのみサイズを変更しています。

更新：ここで利用可能な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>

スクロールを担当するドラッグ可能なコードの一部を実装しようとしましたが、今のところ運がありません:(

4

1 に答える 1

0

この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/

于 2012-06-19T23:21:31.403 に答える