Window.screenX

Свойство Window.screenX только для чтения возвращает горизонтальное расстояние в пикселях CSS левой границы окна просмотра браузера пользователя до левой части экрана.

Заметка: Псевдоним screenX был реализован во всех современных браузерах - Window.screenLeft. Первоначально это поддерживалось только в IE, но было введено повсеместно из-за популярности.

Синтаксис

leftWindowPos = window.screenX 

Возвращает

Число, равное количеству пикселей CSS от левого края окна просмотра браузера до левого края экрана.

Пример

В нашем примере screenleft-screentop вы увидите холст, на котором нарисован круг. В этом примере мы используем Window.screenLeft/Window.screenTop плюс Window.requestAnimationFrame (), чтобы постоянно перерисовывать круг в том же физическом положении на экране, даже если позиция окна перемещается.

initialLeft = window.screenLeft + canvasElem.offsetLeft;
initialTop = window.screenTop + canvasElem.offsetTop;

function positionElem() {
  let newLeft = window.screenLeft + canvasElem.offsetLeft;
  let newTop = window.screenTop + canvasElem.offsetTop;

  let leftUpdate = initialLeft - newLeft;
  let topUpdate = initialTop - newTop;

  ctx.fillStyle = 'rgb(0, 0, 0)';
  ctx.fillRect(0, 0, width, height);
  ctx.fillStyle = 'rgb(0, 0, 255)';
  ctx.beginPath();
  ctx.arc(leftUpdate + (width/2), topUpdate + (height/2) + 35, 50, degToRad(0), degToRad(360), false);
  ctx.fill();

  pElem.textContent = 'Window.screenLeft: ' + window.screenLeft + ', Window.screenTop: ' + window.screenTop;

  window.requestAnimationFrame(positionElem);
}

window.requestAnimationFrame(positionElem);

Они работают точно так же, как screenX / screenY.

Также в код мы включили фрагмент, который определяет, поддерживается ли screenLeft, и, если нет, заполняет поли в screenLeft / screenTop, используя screenX / screenY.

if(!window.screenLeft) {
  window.screenLeft = window.screenX;
  window.screenTop = window.screenY;
}

Спецификация

Спецификация Статус Комментарий
CSS Object Model (CSSOM) View Module
Определение 'Window.screenX' в этой спецификации.
Рабочий черновик Initial definition.

Совместимость браузера

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
screenXChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1
Замечания
Полная поддержка 1
Замечания
Замечания Before Firefox 28, Gecko was using device pixels instead of CSS pixels; in other words, it was assuming a value of screenPixelsPerCSSPixel of 1 for any device.
IE Полная поддержка 9Opera Полная поддержка ≤12.1Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Before Firefox 28, Gecko was using device pixels instead of CSS pixels; in other words, it was assuming a value of screenPixelsPerCSSPixel of 1 for any device.
Opera Android Полная поддержка ≤12.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.

Смотрите также