Question

我使用下面的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)">

Answer 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';
}

Answer 2

这应该将div保持在可查看区域内。

您只需检查宽度加上位置等是否大于或小于可查看区域的值。

我们还在左侧滚动并滚动顶部值，这样我们的计算就不会错误地认为它是可见的;如果你的情况不需要，你可以删除它。

IJavaScriptExecutor

将DIV定位在光标处但在可视区域内

2 个答案: