javascript – 将div修复为屏幕

发布时间：2020-12-14 22:35:30 所属栏目：资源来源：网络整理

导读：在我的项目中,我想将div元素固定到屏幕上的某个位置.不是窗户,屏幕.因此,如果浏览器调整大小,则div保持不变,如果移动浏览器,则div保持不变.可能？这是我的基本html页面,它只包含屏幕中心的一个点. #dot { width: 8px; height: 8px; -webkit-border-radius:

在我的项目中,我想将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;
}


我知道我可以使用window.screenX和window.screenY然后做一些数学运算来确保将位置设置为给出固定元素的错觉,但是这需要每毫秒轮询一次窗口位置来检测浏览器的移动时间(这可能是相当沉重和稀有无论如何).计划的目的不仅仅是一个点……
有任何想法吗？我完全难过了.


最佳答案
我认为你可以使用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();
})();

Here’s the Can I Use link for requestAnimationFrame.
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!