Question

在我的项目中，我想将div元素修复到屏幕上的某个位置。不是窗口，屏幕。因此，如果浏览器调整大小，则div保持不变，如果移动浏览器，则div保持不变。可能的？

这是我的基本html页面，它只包含屏幕中心的一个点。

#dot {
    width: 8px;
    height: 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #000;
    position:relative;
    left: -4px;
    top:-4px;
}

<div style="position: absolute; top: 50%; left: 50%;">
    <div id="dot"></div>
</div>

我知道我可以使用window.screenX和window.screenY，然后进行一些数学计算以确保将位置设置为给出固定元素的错觉，但是这需要每毫秒轮询一次窗口位置检测浏览器何时被移动（这可能是相当沉重和罕见的）。计划的目的不仅仅是一个点......

有什么想法吗？我完全难过了。

Answer 1

由于window.screenX和window.screenY只能在JS中访问，除了轮询变量和使用javascript更改css之外，实际上没有办法做到这一点。

Answer 2

我认为您可以使用requestAnimationFrame，这比setInterval更适合此类任务，以便密切关注window.screenX和window.screenY以及移动（{1}}动画）如果这些数字改变了点div：

var x = window.screenX,
    y = window.screenY;

function moveDot() {
    if(x !== window.screenX || y !== window.screenY)
        console.log('move dot');

    x = window.screenX;
    y = window.screenY;
}

(function animloop(){
    window.requestAnimationFrame(animloop);
    moveDot();
})();

Here's the Can I Use link for requestAnimationFrame

将div修复为屏幕

2 个答案: