Window.screenLeft
åºçº¿
广æ³å¯ç¨
*
èª 2018å¹´12æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
* æ¤ç¹æ§çæäºé¨åçæ¯æç¨åº¦å¯è½ææä¸åã
Window.screenLeft æ¯ä¸ä¸ªåªè¯»å±æ§ï¼å®è¿åæµè§å¨å·¦è¾¹æ¡å°å·¦è¾¹å±å¹è¾¹ç¼ç CSS åç´ æ°ã
夿³¨ï¼screenLeft åªæ¯ Window.screenX 屿§çå«åï¼æååªè¢« IE æµè§å¨ææ¯æãç°å¨ä¸»æµçæµè§å¨é½å·²æ¯æè¯¥å±æ§ã
å¼
è¿åæµè§å¨çªå£å°å±å¹å·¦è¾¹ç¼ç 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;
}
è§è
| è§è |
|---|
| CSSOM View Module > # dom-window-screenleft > |