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

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

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

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

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

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

Значение

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

Примеры

В нашем примере screenleft-screentop вы увидите холст, на который нарисован круг. В этом примере мы используем screenLeft/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);

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

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

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

Спецификация
CSSOM View Module # dom-window-screenleft

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`screenLeft`	1	12	64	≤12.1	1	18	64	≤12.1	1	1.0	4.4
`relative-multi-screen`	100	100	64	86	1 Использования начала координат несогласованно/ненадёжно.	100	64	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/screenLeft