javascript - 如何计算坐标以将元素保持在用户屏幕区域中

Question

我需要在坐标 e.pageX 和 e.pageY 上添加一个绝对元素，其中 e 是 event 对象传递给 mouseover 回调函数。

这不是问题:

element.css({
    'position': 'absolute',
    'z-index': 300,
    'left': e.pageX,
    'top': e.pageY
  });

问题是新元素可以放在当前用户屏幕之外，因此他们需要滚动页面才能查看相应的元素。

如何检查边界并进行适当的计算以使其出现在用户屏幕区域中？

您知道任何现成的解决方案吗？还是我应该考虑自己定制一个？

Answer 1

你可以这样做

var left = e.pageX;
var top = e.pageY;
var right = $( window ).width();
var bottom = $( window ).height();
var elwidth = element.offsetWidth;    /* assuming "element" is an element reference */
var elheight = element.offsetHeight;  /* assuming "element" is an element reference */

if ((e.pageX + elwidth) > right) {
   left = e.pageX - ((e.pageX + elwidth) - right);
}
if ((e.pageY + elheight) > bottom) {
   top = e.pageY - ((e.pageY + elheight) - bottom);
}

element.css({
  'position': 'absolute',
  'z-index': 300,
  'left': left,
  'top': top
});