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 Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания 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 Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания 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 Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

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

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