13

snipplrのこのスクリプトを使用しています。コンテナのdivが、-100などのようにnewWindowHeightの高さより100px低くなるように設定するにはどうすればよいですか。

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
    var newWindowHeight = $(window).height();
    $("#container").css("max-height", newWindowHeight );
}

});         
</script>
4

2 に答える 2

31

あなたが見つけたスクリプトは問題を過度に複雑にしました。以下は私のために働いた：

$(function(){

    // Cache reference to our container
    var $container = $("#container");

    // A function for updating max-height
    function updateMaxHeight () {
        $container.css("max-height", $(this).height() - 100);
    }

    // Call updateMaxHeight when browser resize event fires
    $(window).on("resize", updateMaxHeight);

});

警告の1つは、ブラウザのサイズを変更するときに、サイズ変更イベントが頻繁に呼び出されることです。ブラウザのサイズが変更された後に呼び出されるだけではありません。その結果、コールバック関数が何百回も呼び出される可能性があります。これは一般的に悪い考えです。

解決策は、イベントを抑制またはデバウンスすることです。スロットリングとは、コールバックが一定期間内にx回（おそらく1秒間に5回）以上起動されないことを意味します。デバウンスとは、最後のサイズ変更イベントから一定の時間が経過した後にコールバックを起動することを意味します（サイズ変更イベントから500ミリ秒後まで待機します）。

プラグインはありますが、jQueryは現在スロットルまたはデバウンスオプションをサポートしていません。使用した可能性のある他の一般的なライブラリには、アンダースコアなどの次の機能があります。

$(function(){

    // Cache reference to our container
    var $container = $("#container");

    // A function for updating max-height
    function updateMaxHeight () {
        $container.css("max-height", $(this).height() - 100);
    }

    // Version of updateMaxHeight that will run no more than once every 200ms
    var updateMaxHeightThrottled = _.throttle(updateMaxHeight, 200);

    // Call updateMaxHeightThrottled when browser resize event fires
    $(window).on("resize", updateMaxHeightThrottled);

});
于 2010-01-09T01:11:47.453 に答える
0

特にタグに属する「onResize」というHTMLイベントを見たばかりですが、この使用法ではJava検出よりもパフォーマンスが向上すると思います。

<body onresize="functionhere()">

お役に立てば幸いです。

于 2014-09-21T14:19:35.147 に答える