Question

我有一个点击事件，它会在点击的位置显示我的方框div，并将该框的中心点击鼠标。我想知道的是如何查看该框是否在文档之外。我有一个小提琴，当您单击文档边缘旁边时，您将看到该框的一部分位于文档之外。我怎样才能发现这种情况何时发生？

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

逻辑非常简单：

你必须得到：

框的宽度
视口/文档的宽度
打开时盒子的Y位置

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

所以它会是这样的：

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

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

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

1 个答案: