Window: свойство screenY

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

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

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

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

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

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

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