Chrome中的jQuery位置問題

當我提醒值.position().left時，它在Chrome上返回0。與其他瀏覽器一起返回實際的數字。爲什麼會發生？Chrome中的jQuery位置問題

來源

2010-01-31 goksel

這樣閉幕前將JavaScript代碼文檔中準備好，請發佈更多的代碼，特別是你要調用'position'的元素，或者是一些HTML/CSS來查看可能出現的問題。 – 2010-01-31 20:02:15

基於Webkit的瀏覽器（如Chr ome和Safari）僅在圖像完全加載後才能訪問圖像width和height屬性。其他瀏覽器只要加載DOM就可以訪問這些信息（它們不需要完全加載圖像以瞭解它們的大小）。

所以，如果你有圖片在您的網頁，使用基於WebKit瀏覽器，你應該在$(window).load事件觸發後訪問offset信息，而不是$(document).ready事件之後。

來源

2011-07-06 05:55:57

有時候即使這樣也行不通。另一種選擇是手動設置您的CSS圖像大小。 – 2011-11-10 19:31:19

顯然webkit只能訪問window.load之後的文本寬度和高度屬性。似乎很愚蠢的是，即使Internet Explorer可以正確使用它。我認爲最後一個錯誤是webkit。 – 2014-09-23 21:54:45

有時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「永遠不可用」，您需要在其他地方進行調試。

來源

2010-01-31 20:34:43 David

太好了，謝謝大衛的幫助。 – goksel 2010-02-02 18:19:07

謝謝 - 這也是爲什麼'jQuery.offset（）'返回不正確（非零）值的原因 - 它看起來像我的CSS定位導致Chrome兩次（或其他）佈局文檔。調用'offset'過早地返回元素的位置，因爲它們沒有CSS。 – Justin 2011-01-27 12:48:50

+1我昨天有這個問題。即使在簡單的'$（function（）{console.log（$（'img'）。position（）。top）;}）;'中，位置也是不正確的，'但是在稍後的點擊事件中使用相同的代碼時是正確的。 – andyb 2011-03-27 08:57:22

我有同樣的問題..

我固定它使用：.offset().left代替。但請注意，是不一樣的： http://api.jquery.com/offset/

.position().left曾在Chrome在一些測試中，我所做的，使用比大衛類似的方法（該值可用，因爲第一次嘗試）。

在我的「真正的」應用程序未能甚至閱讀點擊事件的位置（這可以消除任何負載速度問題）。一些意見（在其他論壇）說可能與有關，使用display:inline-block。但我不能使用inline-block重現問題。所以它可能是是另一回事。

來源

2010-02-24 06:00:10 lepe

通過閱讀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 
    }; 
};

來源

2010-04-28 15:01:35 user227353

爲我的問題創作奇蹟......謝謝！ – 2015-12-11 12:09:24

或許有點過時與錯誤的位置問題因爲從2010年，但這個問題的日期我在Chrome中定位問題的技巧：

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

來源

2011-04-17 13:11:30 Hekman

使用jQuery（窗口）.load（）而不是jQuery的（文件）。就緒（）

來源

2012-03-30 19:15:17 zuckerhut

-1

我用這個功能來糾正它。

function getElementPosition(id) { 
      var offsetTrail = document.getElementById(id); 
      var offsetBottom = 0; 
      var offsetTop = 0; 
      while (offsetTrail) { 
       offsetBottom += offsetTrail.offsetBottom; 
       offsetTop += offsetTrail.offsetTop; 
       offsetTrail = offsetTrail.offsetParent; 
      } 

      return { 
       bottom: offsetBottom, 
       toppos: offsetTop 
      }; 
     }

來源

2013-05-28 03:47:05 user2129794

對我來說，它的工作僅由body標籤

它執行它加載後的代碼一切

<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>

來源

2013-08-22 11:44:35

Chrome中的jQuery位置問題

回答

相關問題