将 DIV 定位在光标处但在可视区域内
Posted
技术标签:
【中文标题】将 DIV 定位在光标处但在可视区域内【英文标题】：Position DIV at cursor but within viewable area 【发布时间】：2015-08-09 11:34:28 【问题描述】：我正在使用下面的 showDiv 函数在光标位置显示一个 DIV 弹出菜单，但我不知道如何调整它以使菜单不会从底部或右侧边缘消失可视区域，是否可以在显示 DIV 之前对其进行补偿？
var posx;
var posy;
function getMouse(e)
posx = 0;
posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY)
posx = e.pageX;
posy = e.pageY;
else if (e.clientX || e.clientY)
posx = e.clientX;
posy = e.clientY;
function showDiv(id)
var obj = document.getElementById(id);
obj.style.left=posx+'px';
obj.style.top=posy+'px';
obj.style.display='block';
...
<body onMouseMove="getMouse(event)">
【问题讨论】：
函数showDiv 正在访问来自getMouse 函数的作用域变量？还是在更高的范围内定义？
你能添加工作代码sn-p吗？
【参考方案1】：
function showDiv(id)
var obj = document.getElementById(id),
screenWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) - (obj.clientWidth || obj.offsetWidth),
screenHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - (obj.clientHeight || obj.offsetHeight);
obj.style.left = Math.min(posx, screenWidth) + 'px';
obj.style.top = Math.min(posy, screenHeight) + 'px';
obj.style.display = 'block';
【讨论】：
对不起，我无法让这个优雅的代码工作，因为 DIV 仍然出现在屏幕底部。这是因为网页也从屏幕底部向下延伸了吗？【参考方案2】：这应该使 div 保持在可视区域内。
您只需检查宽度加上位置等是否大于或小于可视区域的值。
我们还添加了向左滚动和向上滚动的值，这样我们的计算就不会错误地认为它是可见的；如果你的情况不需要它，你可以删除它。
function showDiv(id, posX, posY)
var obj = document.getElementById(id),
objWidth = obj.offsetWidth,
objHeight = obj.offsetHeight,
docX = window.pageXOffset || document.documentElement.scrollLeft,
docY = window.pageYOffset || document.documentElement.scrollTop,
winWidth = document.documentElement.clientWidth,
winHeight = document.documentElement.clientHeight;
posX += docX;
posY += docY;
if (posX < docX)
posX = docX;
else if (posX + objWidth > winWidth + docX)
posX = docX + (winWidth - objWidth);
if (posY < docY)
posY = docY;
else if (posY + objHeight > winHeight + docY)
posY = docY + (winHeight - objHeight);
obj.style.top = posY + 'px';
obj.style.left = posX + 'px';
obj.style.display = 'block';
【讨论】：
以上是关于将 DIV 定位在光标处但在可视区域内的主要内容，如果未能解决你的问题，请参考以下文章