offsetTop проти jQuery.offset (). top

Я прочитав це offsetLeftі offsetTopне працюю належним чином у всіх браузерах. jQuery.offset()передбачається забезпечити абстракцію для цього, щоб надати правильне значення xbrowser.

Я намагаюся отримати координати місця натискання елемента щодо лівого верхнього кута елемента.

Проблема в тому, що jQuery.offset().topнасправді мені дають десяткове значення у FFX 3.6 (в IE та Chrome два значення збігаються).

Ця скрипка демонструє проблему. Якщо натиснути нижнє зображення, jQuery.offset().topповертається 327,5, але offsetTopповертається 328.

Я хотів би думати, що offset()повертає правильне значення, і я повинен використовувати його, оскільки воно буде працювати в усіх браузерах. Однак люди, очевидно, не можуть натискати десяткові знаки пікселів. Чи правильний спосіб визначити справжнє зміщення до Math.round()зміщення, яке повертає jQuery? Чи слід використовувати offsetTopзамість цього, або якийсь інший метод?

Я думаю, ви маєте рацію, сказавши, що люди не можуть клацати половину пікселів, тому особисто я б використовував округлений зсув jQuery ...

Ось про що говорить jQuery API Doc.offset() :

Отримайте поточні координати першого елемента або встановіть координати кожного елемента у наборі відповідних елементів щодо документа .

Ось про що говорить веб-API MDN.offsetTop :

offsetTop повертає відстань поточного елемента відносно вершини вузла offsetParent

Це те, що в .offset()основному робить jQuery v.1.11 , отримуючи координати:

var box = { top: 0, left: 0 };

// BlackBerry 5, iOS 3 (original iPhone)
if ( typeof elem.getBoundingClientRect !== strundefined ) {
  box = elem.getBoundingClientRect();
}
win = getWindow( doc );
return {
  top: box.top  + ( win.pageYOffset || docElem.scrollTop )  - ( docElem.clientTop  || 0 ),
  left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
};

• pageYOffset інтуїтивно говорить, скільки було прокручено сторінки
• docElem.scrollTop є резервним варіантом для IE <9 (які, до речі, не підтримуються в jQuery 2)
• docElem.clientTop - ширина верхньої межі елемента (у цьому випадку - документа)
• elem.getBoundingClientRect()отримує координати щодо області перегляду документа (див. коментарі). Він може повертати значення дробу, тому це джерело вашої помилки. Це також може спричинити помилку в IE <8 при збільшенні сторінки. Щоб уникнути значень дробу, спробуйте обчислити позицію ітеративно

Висновок

• Якщо вам потрібні координати щодо батьківського вузла , використовуйте element.offsetTop. Додайте, element.scrollTopякщо ви хочете взяти до уваги батьківську прокрутку. (або використовуйте jQuery .position (), якщо ви фанат цієї бібліотеки)
• Якщо вам потрібні координати щодо області перегляду, використовуйте element.getBoundingClientRect().top. Додайте, window.pageYOffsetякщо хочете врахувати прокрутку документа. Вам не потрібно віднімати документи, clientTopякщо документ не має кордону (зазвичай він не має), тому у вас є положення щодо документа
• Відніміть, element.clientTopякщо ви не вважаєте межу елемента частиною елемента

Спробуйте це: parseInt(jQuery.offset().top, 10)

Можливо, що offsetможе бути не цілим числом, використовуючи emяк одиницю вимірювання, відносне font-sizesв %.

Я також вважаю, що число offsetможе не бути цілим числом, якщо zoomне, 100%але це залежить від того, як браузер обробляє масштабування.

Ви можете використовувати, parseInt(jQuery.offset().top)щоб завжди використовувати значення Integer (примітивне - int) у всіх браузерах.