Window: screenY property

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Window.screenY 읽기 전용 속성은 사용자의 브라우저 뷰포트의 위쪽 테두리에서 화면 위쪽까지의 수직 거리를 CSS 픽셀 단위로 반환합니다.

참고 :>screenY 의 별칭은 최신 브라우저에 Window.screenTop로 구현되었습니다. 이는 원래 IE 브라우저에만 지원이 되었으나 인지도 덕분에 어느 곳에서나 소개되었습니다.

브라우저 뷰포트의 위쪽 가장자리에서 화면의 위쪽 가장자리까지의 CSS 픽셀 단위와 동일한 숫자입니다.

예제

screenleft-screentop (source code) 예제에서는 원형으로 그려진 캔버스를 확인할 수 있습니다. 이 예제에서는 Window.screenLeft/Window.screenTop 에 더하여 Window.requestAnimationFrame() 를 사용하여 창 위치가 바뀌어도 지속적으로 화면 내에서 물리적으로 동일한 위치에 원형을 그립니다.

js
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 로 사용할 수 있도록 탐지하기 위해 스니펫이 추가되었습니다.

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

명세서

Specification
CSSOM View Module
# dom-window-screeny

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
screenY
Relative to the Multi-screen origin

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
See implementation notes.

같이 보기