Window: screenX-Eigenschaft
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
Die schreibgeschützte Window.screenX-Eigenschaft gibt die horizontale Entfernung in CSS-Pixeln von der linken Begrenzung des Browser-Viewports des Benutzers zur linken Seite des Bildschirms zurück.
Hinweis: Ein Alias von screenX wurde in jüngerer Zeit in modernen Browsern implementiert — Window.screenLeft. Dies wurde ursprünglich nur in IE unterstützt, jedoch aufgrund seiner Beliebtheit überall eingeführt.
Wert
Eine Zahl, die der Anzahl der CSS-Pixel vom linken Rand des Browser-Viewports bis zum linken Rand des Bildschirms entspricht.
Beispiele
In unserem Beispiel screenleft-screentop (Quellcode) sehen Sie eine Leinwand, auf die ein Kreis gezeichnet wurde. In diesem Beispiel verwenden wir Window.screenLeft/Window.screenTop sowie Window.requestAnimationFrame(), um den Kreis ständig an derselben physischen Position auf dem Bildschirm neu zu zeichnen, selbst wenn das Fenster verschoben wird.
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); Diese funktionieren genau wie screenX/screenY.
Im Code ist außerdem ein Schnipsel enthalten, das erkennt, ob screenLeft unterstützt wird. Wenn nicht, wird screenLeft/screenTop mithilfe von screenX/screenY polyfilled.
if (!window.screenLeft) { window.screenLeft = window.screenX; window.screenTop = window.screenY; } Spezifikationen
| Specification |
|---|
| CSSOM View Module # dom-window-screenx |
Browser-Kompatibilität
Loading…