Window: screenLeft property
BaselineWidely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.
* Some parts of this feature may have varying levels of support.
TheWindow.screenLeft read-only property returns thehorizontal distance, in CSS pixels, from the left border of the user's browser viewportto the left side of the screen.
Note:screenLeft is an alias of the olderWindow.screenX property.screenLeft 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-screentopexample, you'll see a canvas onto which has been drawn a circle. In this example we areusingscreenLeft/screenTop plusWindow.requestAnimationFrame() to constantly redraw the circle in thesame 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);Also in the code we include a snippet that detects whetherscreenLeft issupported, and if not, polyfills inscreenLeft/screenTop usingWindow.screenX/Window.screenY.
if (!window.screenLeft) { window.screenLeft = window.screenX; window.screenTop = window.screenY;}Specifications
| Specification |
|---|
| CSSOM View Module # dom-window-screenleft |