$ (элемент).position().top возвращает неверное значение

#javascript #jquery #html

#javascript #jquery — jquery — запрос #HTML #jquery

Вопрос:

Я работаю над asp.net проект и недавно мы обновили версию jQuery с 1.11.1 до 3.3.1, а затем, после того как мы столкнулись с какой-то странной проблемой с:

 $(element).position().top

Ребята, у вас есть какие-нибудь идеи, что мы можем использовать в качестве альтернативы position().top или JavaScript?

Я также обнаружил некоторые ошибки, связанные с position ().top, возвращающими неправильные значения в jQuery 3.3.1.

Может кто-нибудь, пожалуйста, предложить альтернативу position().top ? Это было бы действительно полезно.

Заранее благодарю.

1. Попробуйте отложить измерение и посмотреть, поможет ли это.

2. position() использует поле полей элемента относительно поля заполнения его «родительского элемента со смещением». Если вы привыкли к современной тенденции измерять все с точностью до границы, это может показаться неправильным. Вы можете видеть, как это отражено в ответе на ошибку. На самом деле они исправляют предыдущее поведение, которое было неправильным (в нескольких версиях, так что на самом деле они нарушают много кода).

Ответ №1:

Взгляните на этот пример, чтобы увидеть, как получить свойство TOP в обычном JS:

 // Source: https://plainjs.com/javascript/styles/get-the-position-of-an-element-relative-to-the-document-24/
function offset(el) {
    var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return { top: rect.top   scrollTop, left: rect.left   scrollLeft }
}


// Get properties
var test_element = document.getElementById('relative-div'),
    position = offset(test_element);


// Display them here
document.getElementById('result').innerHTML = JSON.stringify(position, null, 2);


// Use property where you need it
console.log(position.top);

 #test{
  position: fixed;
  top: 20px;
  left: 300px;
  width: 100px;
  height:100px;
  background-color: red;
}
#relative-div{
  position: relative;
  left: 30px;
  top: 20px;
}

 <div id='test'>
  <div id='relative-div'>xxx</div>
</div>
<pre id='result'></pre>

Как кто-то предположил, неправильное значение position, которое вы получаете, может возникнуть из-за асинхронных функций, которые могут влиять на поведение и внешний вид страницы.

Другой возможной причиной может быть то, что вам нужно дождаться полной загрузки страницы, прежде чем читать это свойство. Для этого используйте $(document).ready() как показано ниже:

 $(document).ready(function(){
     // here
     console.log($(element).position().top)
})

1. При использовании getClientBoundingRect таким образом вы совсем немного допускаете; это неподходящая замена для position() . Действительно, [глядя на источник position() ] он используется getClientBoundingRect только для position: fixed элементов]( github.com/jquery/jquery/blob /… ).

2. @HereticMonkey спасибо, что указали на это. Я обновил свой ответ.

Ответ №2:

Альтернативой position() является offset() в вашем случае возврат объекта, содержащего свойства top и left.

пример :

 var offset = $(element).offset();
top = offset.top();
left = offset.left();

у меня также были проблемы, когда position () и offset () возвращали разные значения, и я не мог сказать почему, я чувствую, что это ошибка в библиотеке jquery, но просто попробуйте это .. я надеюсь, это сработает.

1. offset() это другая функция именно потому, что она вычисляет другое значение. То есть положение элемента относительно документа, а не относительно родительского элемента со смещением. Это не ошибка.