固定div到屏幕

Question

在我的项目中，我想要将一个

元素固定在屏幕的特定位置上，而不是窗口。因此，如果浏览器大小发生变化，该

仍然保持不动，如果浏览器被移动，该

仍然保持不动。这可能吗？

这是我的基本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，然后进行一些数学计算，以确保位置设置为给予固定元素的错觉，但是这将需要每毫秒轮询窗口位置以检测浏览器何时移动（这可能非常繁重且很少发生）。计划在不止一个点上完成此操作...有任何想法吗？我完全被难住了。

- mrg95

---

除了你已经知道的方法，你不能以其他方式做到这一点。 - Asons

这就是为什么我想把它添加到我的网站上的原因。 - mrg95

Answer 1

由于window.screenX和window.screenY只能在JS中访问，因此没有其他方法可以通过轮询变量并使用JavaScript更改CSS来实现此功能。

- Tennyson H

Answer 2

我认为你可以使用requestAnimationFrame，这比setInterval更适合此类任务，以监视window.screenX和window.screenY，如果这些数字发生变化，还可以移动（动画化）点的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();
})();

这里是requestAnimationFrame的Can I Use链接。

- Adrian Guerrero

---

嗯，它有点卡顿。有些摇晃，不如我所希望的那么干净... 嗯。 - mrg95

是的，它不会每毫秒都被调用。我不知道你是否可以使用动画来将物品放回原位，但我认为这可以帮助你，因为在不同的浏览器中实现可能会有所不同。我正在 MacBook 上使用 Chrome，在这里 screenX 和 screenY 属性会在停止移动浏览器时发生变化，它们不会在每个像素移动时发生变化，因此在这种情况下，点不会平滑移动。 - Adrian Guerrero

也许问题在于改变位置后，直到下一帧才显示出来？ - mrg95

requestAnimationFrame 的间隔是60fps（大约每16ms），如果你想减少这个时间，唯一的选择就是使用 setInterval。 - Adrian Guerrero