Window.screenLeft

Window.screenLeft 是一个只读属性,它返回浏览器左边框到左边屏幕边缘的 CSS 像素数。

注意screenLeft 只是 Window.screenX  属性的别名,最初只被 IE 浏览器所支持。现在主流的浏览器都已支持该属性。

语法

leftWindowPos = window.screenLeft

返回值

返回浏览器窗口到屏幕左边缘的 CSS 像素距离数值。

例子

在 screenleft-screentop 项目中,展示了一个监听浏览器窗口位置变化,动态更新 canvas 的例子。在这个例子中,当你移动浏览器窗口位置,绘制在 canvas 上的圆也会对应移动。我们通过监听 screenLeft/screenTop 的变化,并使用 Window.requestAnimationFrame() 来对 canvas 实时重绘,保证了浏览器窗口移动时,canvas 内部圆的位置也会发生对应的移动。

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);

如果浏览器不支持 screenLeft属性,我们还在代码中使用了一个 polyfill 来保证演示效果。通过设置 Window.screenX/Window.screenY 为对应别名来实现一样的功能。

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

说明

规范 状态 提交
CSS Object Model (CSSOM) View Module
Window.screenLeft
Working Draft Initial definition.

浏览器兼容性

BCD tables only load in the browser

参考