Vấn đề vị trí jQuery với Chrome

Khi tôi cảnh báo giá trị .position().left, nó trả về 0 trên Chrome. Với các trình duyệt khác, nó trả về số thực. Lý do tại sao điều này xảy ra?Vấn đề vị trí jQuery với Chrome

Nguồn

2010-01-31 goksel

Hãy đăng thêm mã, cụ thể là phần tử nào bạn đang gọi 'vị trí' trên và có thể một số HTML/CSS để xem điều gì có thể xảy ra. –

Trình duyệt dựa trên Webkit (như Chr ome và Safari) có thể truy cập hình ảnh width và height chỉ sau khi hình ảnh được tải hoàn toàn. Các trình duyệt khác có thể truy cập thông tin này ngay sau khi DOM được tải (chúng không cần tải toàn bộ hình ảnh để biết kích thước của chúng).

Vì vậy, nếu bạn có hình ảnh trong trang của mình, với trình duyệt dựa trên Webkit, bạn nên truy cập thông tin offset sau khi sự kiện $(window).load kích hoạt và không sau sự kiện $(document).ready.

Nguồn

2011-07-06 05:55:57

Và đôi khi thậm chí sau đó nó không hoạt động. Một tùy chọn khác là đặt thủ công kích thước hình ảnh trong css của bạn. –

Và dường như webkit chỉ có thể truy cập các thuộc tính chiều rộng và chiều cao của văn bản sau khi tải window.load. Có vẻ ngớ ngẩn rằng ngay cả Internet Explorer cũng có thể làm đúng. Người cuối cùng tôi nghĩ sẽ làm sai nó là webkit. –

Webkit đôi khi có thể quá nhanh, nhưng thường được chú ý trong jQuery. Bạn có thể gỡ lỗi bằng cách sử dụng một cái gì đó như:

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

Điều này sẽ kiểm tra xem và khi nào vị trí có sẵn. Nếu bạn đang đăng nhập "0" trong vô cùng, position().left là "không bao giờ" có sẵn và bạn cần phải gỡ lỗi ở nơi khác.

Nguồn

2010-01-31 20:34:43 David

tuyệt vời, cảm ơn vì đã giúp David. – goksel

Cảm ơn - đây cũng là lý do tại sao 'jQuery.offset()' đã trả về giá trị không chính xác (không đồng nhất) - có vẻ như định vị CSS của tôi đã khiến Chrome đặt tài liệu hai lần (hoặc một cái gì đó). Việc gọi 'offset' quá sớm sẽ trả về vị trí của các phần tử vì chúng sẽ không có CSS. – Justin

+1 Tôi gặp vấn đề này ngày hôm qua. Vị trí không chính xác ngay cả trong một đơn giản '$ (function() {console.log ($ ('img'). Position(). Top);});' nhưng đã đúng khi sử dụng cùng một mã trong một sự kiện nhấp chuột sau đó. – andyb

Tôi có cùng sự cố ..

Tôi đã sửa lỗi bằng cách sử dụng: .offset().left thay thế. Nhưng lưu ý rằng không giống nhau: http://api.jquery.com/offset/

.position().left làm việc trong Chrome trong một số xét nghiệm tôi đã làm, sử dụng một cách tiếp cận tương tự so với David (giá trị đã có sẵn kể từ khi thử đầu tiên).

Trong ứng dụng "thực" của tôi không thành công, ngay cả đọc vị trí trên sự kiện nhấp chuột (có thể loại bỏ bất kỳ vấn đề nào về tốc độ tải tốc độ). Một số ý kiến (trong diễn đàn khác) nói rằng nó có thể liên quan để sử dụng display:inline-block. Tuy nhiên, tôi không thể sao chép sự cố bằng cách sử dụng inline-block. Vì vậy, nó có thể là điều khác.

Nguồn

2010-02-24 06:00:10 lepe

Bằng cách đọc nhận xét từ http://api.jquery.com/position/, có một số cách để khắc phục sự cố này. Người tôi thấy làm việc là

Ajaho [Moderator]: chức năng Plugin này sửa chữa các vấn đề với vị trí sai trong 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 
    }; 
};

Nguồn

2010-04-28 15:01:35 user227353

Hoạt động kỳ diệu cho vấn đề của tôi ... cảm ơn bạn! –

Có lẽ một chút lỗi thời kể từ khi câu hỏi ngày từ năm 2010 nhưng điều này đã làm mẹo cho các sự cố định vị của tôi trong Chrome:

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

Nguồn

2011-04-17 13:11:30 Hekman

sử dụng jQuery (cửa sổ) .load() thay vì jQuery (document) .ready()

Nguồn

2012-03-30 19:15:17 zuckerhut

-1

tôi sử dụng chức năng này để sửa chữa nó.

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

Nguồn

2013-05-28 03:47:05 user2129794

Đối với tôi nó làm việc bằng cách đặt các mã javascript trong một tài liệu đã sẵn sàng ngay trước thẻ đóng của thẻ cơ thể

Bằng cách đó nó thực thi mã sau khi nó đã được nạp tất cả mọi thứ

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

Nguồn

2013-08-22 11:44:35

Vấn đề vị trí jQuery với Chrome

Trả lời

Các vấn đề liên quan