web-dev-qa-db-ja.com

ChromeのjQuery位置の問題

値.position().leftに警告すると、 Chrome で0が返されます。他のブラウザでは、実際の数を返します。なぜこれが起こるのですか？

jquerygoogle-chromeposition
20
goksel

Webkitベースのブラウザ（ChromeやSafariなど）は、画像が完全に読み込まれた後にのみ、画像のwidthおよびheightプロパティにアクセスできます。他のブラウザは、次のようにこの情報にアクセスできます。 DOMだけがロードされるとすぐに（サイズを知るために画像を完全にロードする必要はありません）。

したがって、ページに画像がある場合、Webkitベースのブラウザでは、$(window).loadイベントの発生後ではなく、$(document).readyイベントの発生後にoffset情報にアクセスする必要があります。

35
Luca Fagioli

http://api.jquery.com/position/ からのコメントを読むことにより、これを修正するいくつかの方法があります。私が働いていると思ったのは

Ajaho [モデレーター]：このプラグイン関数は、Chromeの間違った位置に関する問題を修正します

jQuery.fn.aPosition = function() {
    thisLeft = this.offset().left;
    thisTop = this.offset().top;
    thisParent = this.parent();

    parentLeft = thisParent.offset().left;
    parentTop = thisParent.offset().top;

    return {
        left: thisLeft-parentLeft,
        top: thisTop-parentTop
    };
};
8
user227353

Webkitは高速すぎる場合がありますが、jQueryで処理されることがよくあります。次のようなものを使用してデバッグできます。

_var v, elem = $('.myElement');
window.setTimeout(function() {
    v = elem.position().left;
    console.log(v);
    if (v) {
        return false;
    }
    window.setTimeout(arguments.callee, 1);
}, 1);
_

これにより、ポジションが利用可能かどうか、いつ利用可能かがチェックされます。無限大で「0」をログに記録している場合、position().leftは「決して」使用できないため、他の場所でデバッグする必要があります。

7
David Hellsing

私も同じ問題を抱えていました。

代わりに.offset().leftを使用して修正しました。ただし、同じではないことに注意してください： http://api.jquery.com/offset/

.position().leftはChromeで、Davidと同様のアプローチを使用して行ったいくつかのテストで機能しました（値は最初の試行以降利用可能でした）。

私の「実際の」アプリケーションでは、クリックイベントの位置を読み取っても失敗しました（これにより、読み込み速度の問題が解消される可能性があります）。 （他のフォーラムの）いくつかのコメントは、それがdisplay:inline-blockの使用に関連しているかもしれないと言っています。ただし、inline-blockを使用して問題を再現することはできませんでした。だからそれは他のことかもしれません。

6
lepe

質問の日付が2010年なので、おそらく少し時代遅れですが、これはChromeでの位置の問題のトリックになりました。

$(window).load(function(){
  p = $('element').offset();
  // et cetera
});
4
Hekman

私にとっては、bodyタグを閉じる直前にJavaScriptコードをドキュメントに配置することで機能しました

そうすれば、すべてをロードした後にコードを実行します

    <body>
        <div>content</div>
        <div class='footer'>footer</div>
        .
        .
        .

        <script type='text/javascript>
            $(document).ready(function(){
              var footer_position = $(".footer").offset().top;
              console.log(footer_position);
            });
        </script>
     </body>
0
Martin Taleski

jQuery（document）.ready（）の代わりにjQuery（window）.load（）を使用する

0
zuckerhut