Окно: свойство screenX

Базовая линия Широко доступно *

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

* Некоторые части этой функции могут иметь различный уровень поддержки.

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

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

Значение

Число, равное количеству пикселей 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;
}

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

Спецификация
Модуль CSSOM View # dom-window-screenx

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

	Рабочий стол					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в iOS	Samsung Internet	WebView Android
`screenX`	1	12	1 Перед Firefox 28 Gecko использовал пиксели устройства вместо пикселей CSS; другими словами, он предполагал значение `screenPixelsPerCSSPixel` равное 1 для любого устройства.	≤12.1	1	18	4 Перед Firefox для Android 28 Gecko использовал пиксели устройства вместо пикселей CSS; другими словами, он предполагал значение `screenPixelsPerCSSPixel` равное 1 для любого устройства.	≤12.1	1	1.0	4.4
`relative-multi-screen`	100	100	1	86	1 Используемое положение начала координат несогласованно/ненадежно.	100	4	69	1 Используемое положение начала координат несогласованно/ненадежно.	19.0	100

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Window/screenX