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

How to calculate coordinates to keep element in the user screen's region

本文关键字：用户 保留 屏幕 区域 元素 何计算 计算 坐标      更新时间：2023-09-26

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

这不是问题：

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

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

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

您知道任何现成的解决方案吗，或者我应该自己考虑定制解决方案吗？

你可以做这样的事情

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
});
相关文章：