Javascript получает положение элемента относительно верхнего левого угла экрана

Question

Обратите внимание, что ни функция jQuery position, ни getBoundingClientRect Javascript не делают то, о чем я прошу.

Я пытаюсь получить положение элемента относительно верхних левых координат экрана пользователя.

Я в основном ищу, чтобы понять это для Google chrome. Я был бы признателен за любой ответ, который может привести меня к правильному пути.

Answer 1

Использование .offset() функции JQuery, вы можете получить координаты верхней левой части страницы браузера:

var offset = $("selector").offset(); 

Объединяя что со свойствами окна Javascript window.screenX and window.screenY, можно вычислить положение элемента, как смещение от верхней/левой части экрана:

var screenY = offset.top + window.screenX; 
var screenX = offset.left + window.screenY; 

Обратите внимание, что window.screenX и window.screenY являются стандартными в наиболее браузеров, но IE версии 8 и ранее использовались window.screenTop и window.screenLeft. Если вам нужна совместимость с IE8 или ранее, обязательно учтите это.

Также обратите внимание, что вам может потребоваться учитывать текущую позицию прокрутки, и в этом случае вы должны использовать методы jQuery .scrollTop() и .scrollLeft() и вычесть из значения смещения.

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

Суть этого решения заключается в следующем, который устанавливает одноразовое использование обработчика мыши, чтобы определить фактические координаты экрана страницы:

var pageX; 
var pageY; 

window.onmousemove = setMouseCoordinates; 

function setMouseCoordinates (e) { 
    window.onmousemove = null; 

    pageX = e.screenX - e.clientX; 
    pageY = e.screenY - e.clientY; 
} 

Затем вы можете использовать эти сохраненные значения для расчета смещение любого элемента JavaScript:

x = pageX + elem.offsetLeft; 
y = pageY + elem.offsetTop; 

или JQuery элемент:

x = pageX + elem.position().left; 
y = pageY + elem.position().top; 

Посмотрите на скрипку, чтобы увидеть ее в действии: https://jsfiddle.net/mgaskill/bpqzct3f/

Answer 2

Я думаю, что HTMLElement.offSetLeft и HTMLElement.offSetTop - это то, что вы ищете.