jquery - 如何检查样式框是否在文档之外

Question

我有一个点击事件，它将在点击的位置显示我的框 div，并将框以鼠标点击为中心。我想知道的是如何查看框是否在文档之外。我有一个 js fiddle ，当您单击文档边缘旁边的时，您会看到部分框在文档之外。我如何检测这种情况何时发生？

JSFiddle:https://jsfiddle.net/ayxq7x45/

JS:

$(document).on('click',function(e){
    var boxWidth = $('.box').width();
    $('.box').css({
      top:e.pageY + 10,
      left:e.pageX - boxWidth / 2,
      display:'block'
    })
    //if box is outside of document
        //console.log(true);
});

Answer 1

逻辑很简单:

你必须得到:

• 盒子的宽度<​​/li>
• 视口(viewport)/文档的宽度
• 盒子打开时的Y位置

并计算Y位置+框的宽度是否大于视口(viewport)的宽度，如果是，则Y位置必须是视口(viewport)的宽度-框的宽度。

所以它会是这样的:

var boxWidth = $('.box').width();
var boxY = $('.box').offset().left;
var viewPortWidth = $(window).outerWidth();

if(boxY+boxWidth > viewPortWidth){
  $('.box').offset().left = viewPortWidth - boxWidth;
}