javascript– 将div修复为屏幕

javascript– 将div修复为屏幕,第1张

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

在我的项目中,我想将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. 总结

以上是内存溢出为你收集整理的javascript – 将div修复为屏幕全部内容,希望文章能够帮你解决javascript – 将div修复为屏幕所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1118438.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-29
下一篇2022-05-29

发表评论

登录后才能评论

评论列表(0条)