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
});

如何计算坐标以将元素保留在用户屏幕的区域中

1 个答案: