Javascript 如何检测div是否超出页面边界？

我正在使用一些jQuery来显示一个div，当您将鼠标悬停在一个链接上时会弹出。但是，当链接太靠近浏览器窗口的右侧并且弹出窗口的内容不可见时，就会出现问题

我在这里用相同的jQuery代码做了一个示例：

我相信一个

语句就可以解决这个问题，一些伪代码：

if(element is out of boundaries){
    moveleft=-400;
}

我只需要将div移到左边，从边界移到底部不会有问题，带有悬停触发器的链接在页面上不会太低
尝试使用以下JS代码：

jQuery(function() {
  var moveLeft = 20;
  var moveDown = 10;

  jQuery('.box').hover(function(e) {

   if (e.pageX+jQuery('div.hidden').width() > jQuery(document).width()) {
      moveLeft = -20 - jQuery('div.hidden').width();
   }
   else
   {
       moveLeft = 20;
   }

    jQuery('div.hidden').show();
  }, function() {
    jQuery('div.hidden').hide();
  });

  jQuery('.box').mousemove(function(e) {
    jQuery("div.hidden").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });

});

检查工具提示的位置，添加其尺寸，并将其与本例窗口中的视口大小进行比较



jQuery（函数（）{
var moveLeft=20；
var-moveDown=10；
jQuery（'.box'）.hover（函数（e）{
jQuery（'div.hidden'）.show（）；
}，函数（）{
jQuery（'div.hidden'）.hide（）；
});
jQuery（'.box'）.mousemove（函数（e）{
var newY=e.pageY+moveDown；
var newX=e.pageX+moveLeft；
变量yOver=（newY+$（'.hidden'）.height（））-$（window.height（）；
var xOver=（newX+$（'.hidden'）.width（））-$（window.width（）；
如果（yOver>0）newY-=yOver；
如果（xOver>0）newX-=xOver；
css（{top:newY，left:newX}）；
});
});
.box{
宽度：200px；
高度：100px；
背景颜色：灰色；
}
.中{
浮动：无；
保证金：0自动；
}
.对{
浮动：对；
}
.box.hidden{
高度：自动；
位置：绝对位置；
显示：无；
}

我是一个普通的盒子，有一个

我是一个普通的盒子，有一个

我是一个普通的盒子，有一个

我是一个隐藏的盒子，里面有一些内容。Lorem ipsum dolor sit amet，奉献精英。此外，除暂时性不适外，其他不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性不适性

您应该在问题中包含您的代码，因为链接会腐烂，用户不必访问外部站点。如果代码太大而无法在这里发布，请删除不需要最小化的代码。好的，我会记住这一点。Thank.moveLeft是一个变量，它通过DEAFULT将悬停div从鼠标移动到左侧，在这种情况下，它被赋予一个负值，导致div向右移动