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

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

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

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

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

Примечание: screenTop является псевдонимом более старого свойства Window.screenY. screenTop изначально поддерживался только в 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 # dom-window-screentop

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`screenTop`	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/screenTop