Window: screenX property
BaselineWidely 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.
TheWindow.screenX read-only property returns thehorizontal distance, in CSS pixels, of the left border of the user's browser viewport tothe left side of the screen.
Note:An alias ofscreenX was implemented across modernbrowsers in more recent times —Window.screenLeft. This was originallysupported only in IE but was introduced everywhere due to popularity.
Value
A number equal to the number of CSS pixels from the left edge of the browser viewportto the left edge of the screen.
Examples
In ourscreenleft-screentop (source code) example, you'll see a canvas onto which has been drawn a circle. In thisexample we are usingWindow.screenLeft/Window.screenTopplusWindow.requestAnimationFrame() to constantly redraw the circle inthe same physical position on the screen, even if the window position is moved.
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);These work in exactly the same way asscreenX/screenY.
Also in the code we include a snippet that detects whetherscreenLeft issupported, and if not, polyfills inscreenLeft/screenTop usingscreenX/screenY.
if (!window.screenLeft) { window.screenLeft = window.screenX; window.screenTop = window.screenY;}Specifications
| Specification |
|---|
| CSSOM View Module # dom-window-screenx |