Проблема с положением jQuery в Chrome

Когда я предупреждаю о значении .position().left, оно возвращает 0 в Chrome. В других браузерах он возвращает фактический номер. Почему это происходит?


google-chrome jquery position
person goksel    schedule 31.01.2010    source источник
comment
Пожалуйста, опубликуйте больше кода, в частности, какой элемент вы вызываете position, и, возможно, немного HTML/CSS, чтобы увидеть, что может пойти не так.   -  person Doug Neiner    schedule 31.01.2010

Ответы (8)


arrow_upward
35
arrow_downward

Браузеры на основе Webkit (например, Chrome и Safari) могут получить доступ к свойствам изображений width и height только после полной загрузки изображений. Другие браузеры могут получить доступ к этой информации, как только загрузится только DOM (им не нужно полностью загружать изображения, чтобы узнать их размер).

Таким образом, если на вашей странице есть изображения, в браузерах на основе Webkit вы должны получить доступ к информации offset после срабатывания события $(window).load, а не после события $(document).ready.

person Luca Fagioli    schedule 06.07.2011
comment
А иногда и тогда не получается. Другой вариант — вручную установить размеры изображения в файле css. - person Will Shaver; 10.11.2011
comment
И, по-видимому, webkit может получить доступ к свойствам ширины и высоты текста только после window.load. Кажется глупым, что даже Internet Explorer может сделать это правильно. Последнее, что, как я думал, может ошибиться, это webkit. - person Dennis Day; 24.09.2014

arrow_upward
9
arrow_downward

Читая комментарии с http://api.jquery.com/position/, вы можете почини это. Тот, который я нашел работающим,

Ajaho [Moderator]: эта функция плагина исправляет проблемы с неправильным положением в 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
    };
};
person user227353    schedule 28.04.2010

arrow_upward
7
arrow_downward

Иногда 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 «никогда» недоступно, и вам нужно отлаживать в другом месте.

person David Hellsing    schedule 31.01.2010
comment
Спасибо - это также было причиной того, что jQuery.offset() возвращал неверные (ненулевые) значения - похоже, мое позиционирование CSS заставляло Chrome дважды размещать документ (или что-то в этом роде). Вызов offset слишком рано вернул положение элементов, как если бы они были без CSS. - person Justin; 27.01.2011
comment
+1 У меня была эта проблема вчера. Позиция была неправильной даже в простом $(function(){console.log($('img').position().top);});, но была правильной при использовании того же кода в событии щелчка позже. - person andyb; 27.03.2011

arrow_upward
6
arrow_downward

У меня такая же проблема..

Я исправил это, используя: .offset().left вместо этого. Но имейте в виду, что это не одно и то же: http://api.jquery.com/offset/

.position().left работало в Chrome в некоторых тестах, которые я проводил, используя тот же подход, что и Дэвид (значение было доступно с первой попытки).

В моем «настоящем» приложении не удалось даже прочитать позицию по событию щелчка (что может устранить любую проблему со скоростью загрузки). В некоторых комментариях (на другом форуме) говорится, что это может быть связано с использованием display:inline-block. Однако я не смог воспроизвести проблему, используя inline-block. Так что может дело в другом.

person lepe    schedule 24.02.2010

arrow_upward
4
arrow_downward

Возможно, это немного устарело, поскольку вопросы датируются 2010 годом, но это решило мои проблемы с позиционированием в Chrome:

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

arrow_upward
0
arrow_downward

используйте jQuery(window).load() вместо jQuery(document).ready()

person zuckerhut    schedule 30.03.2012

arrow_upward
0
arrow_downward

Для меня это сработало, поместив код javascript в документ, готовый непосредственно перед закрытием тега 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>
person Martin Taleski    schedule 22.08.2013

arrow_upward
-1
arrow_downward

Я использую эту функцию, чтобы исправить это.

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
          };
      }
person user2129794    schedule 28.05.2013