5

ページがロードされた後に JavaScript を使用して padding-right の値を変更しようとすると、何らかの理由でドキュメント本文の右のパディングが表示上で正しく更新されません。問題を示すこのフィドルをチェックしてください。

HTML

<html><body><div></div></body></html>

JavaScript

// Workaround #1: changing right padding without timeout
//$(document.body).css('padding-right', '100px');
setTimeout(function () {
    // This doesn't work properly (at least for me) in Chrome on Ubuntu 12.04
    $(document.body).css('padding-right', '100px');
    // Write info in body that function was executed
    $(document.body).append('timeout function executed');
    // Workaround #2: write content into div
    //$('div').append('timeout function executed');
    // Workaround #3: set document body display to none and back to block via zero ms timeout
    /*$(document.body).css('display', 'none');
    setTimeout(function () {
        $(document.body).css('display', 'block');
    }, 0);*/
}, 1000);

http://jsfiddle.net/gyqEK/2/

右パディングの変更を有効にする方法がいくつかありました

  • ブラウザ ウィンドウのサイズを変更する
  • ドキュメント本文の表示をなしに切り替え、ゼロミリ秒のタイムアウト機能を介してブロックに戻ります
  • いくつかの HTML コンテンツを div に書き込みます (フィドルの例)

Windows Chrome ではまだテストしていませんが、Ubuntu 12.04 Chrome バージョン 24 ではこの問題を再現できます。Firefox では、この問題は発生しません。この同じ問題に直面している他の誰かが、これが他のオペレーティング システムや Chrome バージョンでも発生するかどうかを確認できますか?

アップデート

達成したかった元のアイデアに近づいた新しいフィドルを更新しました。「何か」が完了すると（この場合はdivがクリックされます）、文書本文の右パディングを多かれ少なかれ滑らかなアニメーションで変更したいと思いました。これは Firefox では完全に機能しますが、最新の Chrome では機能しません。

$('div').click(function () {
    var jqBody = $(document.body);
    if (jqBody.css('padding-right') !== '200px') {
        jqBody.animate({
            'padding-right': '200px'
        }, 500);
    } else {
        jqBody.animate({
            'padding-right': '0'
        }, 500);
    }
});

http://jsfiddle.net/gyqEK/5/

ドキュメント本文の右パディングを変更することが理にかなっているのかどうかは別の問題です。私の目標は、すべてのページ コンテンツを右端から 200 ピクセル離して、そこに絶対配置されたサイドバー div 要素用のスペースを確保することでした。ページのコンテンツを div 要素にラップすることでこれを達成しました。body padding-right の代わりに、ラッパーの div 要素の右マージンを変更しています。このアプローチは、Chrome でもスムーズに機能します。

4

2 に答える 2

0

これは、何らかの方法でページのロード手順に接続されています。ページが完全に読み込まれていることがわからない限り、JQuery を正常に実行することは期待できません。最初の「準備完了」イベントの後にすべての Jquery が実行されるようにする必要があります。

コードを次のように置き換えると:

$(document).ready(function(){
    setTimeout(function () {
        $(document.body).css('padding-right', '100px');
        // Write info in body that function was executed
        $(document.body).append('timeout function executed');
       },1000);
});

... Chrome や他のブラウザーで意図したとおりに動作します (Ubuntu 12.04 で Firefox と Chrome をテスト済み)。

于 2013-02-08T21:45:36.017 に答える
0

他の誰かが 2 年以上前に同じバグに出くわしましたが、この解決策は私にとってはうまくいきました。

https://stackoverflow.com/a/3485654/1532332

これが Chrome で修正されていない理由が信じられません。とにかく、パディングアニメーションがChromeでも機能する更新されたフィドルがあります。コードはよりきれいになる可能性がありますが、私はこれをきちんとするのが面倒です :)

$('div').click(function () {
    var jqBody = $(document.body);
    if (jqBody.css('padding-right') !== '200px') {
        jqBody.animate({
            'padding-right': '200px'
        }, {
            duration: 500,
            step: function () {
                this.style.display = 'none';
                this.offsetHeight;
                this.style.display = 'block';
            }
        });
    } else {
        jqBody.animate({
            'padding-right': '0'
        }, {
            duration: 500,
            step: function () {
                this.style.display = 'none';
                this.offsetHeight;
                this.style.display = 'block';
            }
        });
    }
});

http://jsfiddle.net/gyqEK/6/

ここには間違いなく欠点があります。各アニメーション ステップで、要素の表示が none に切り替えられ、offsetHeight が読み取られ、表示がブロックに戻されます。これにより、本文のパディングのアニメーション化に問題がない Firefox などのブラウザでもオーバーヘッドが発生します。さらに、このようなものが非ブロック要素に使用できるかどうかはわかりませんが、私の場合は心配する必要はありません。

于 2013-02-11T23:56:06.843 に答える