jquery获取元素到屏幕四周可视距离的方法

获取元素到屏幕四周的可视距离，一般需要通过jQuery计算元素与viewport的距离来实现。以下是实现此目的的完整攻略。

1. 计算元素与viewport的距离

首先，我们需要计算元素与viewport之间的距离（包含上、下、左、右四个方向）。可以通过以下代码来实现：

// 计算元素与viewport的距离
var elementTop = $('#element').offset().top;
var elementBottom = elementTop + $('#element').outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();

var distance = {
  'top': Math.abs(elementTop - viewportTop),
  'bottom': Math.abs(elementBottom - viewportBottom),
  'left': $('#element').offset().left,
  'right': $('body').width() - ($('#element').offset().left + $('#element').outerWidth())
};

代码中，$('#element') 是要获取距离的元素。这里使用了 jQuery 的 offset() 方法来获取元素在文档中的位置，outerHeight() 方法来获取元素包括 padding 和 border 的高度。使用 $(window).scrollTop() 来获取 viewport 的顶部位置。使用 $(window).height() 获取 viewport 的高度，再通过相加得到 viewport 的底部位置。

最后，计算出元素到viewport四周的距离，使用一个包含四个方向距离的对象（distance）保存。

2. 判断元素是否在可视范围内

一旦计算出元素到viewport四周的距离，我们就可以根据不同场景来判断元素是否在可视范围内。例如，如果要判断元素是否完全在viewport中，可以使用以下代码来实现：

// 判断元素是否完全在viewport中
if (distance.top >= 0 && distance.bottom >= 0 && distance.left >= 0 && distance.right >= 0) {
  console.log('element is completely visible');
} else {
  console.log('element is not completely visible');
}

该代码使用 distance 对象中的四个方向距离值判断元素是否被完全包含在 viewport 中。

如果需要判断元素是否部分在viewport中，可以将上面代码中的 && 运算符改为 || 运算符即可。

示例说明

假设我们要监听文档滚动事件，当某个元素进入可视范围内时，输出该元素的名称。当该元素完全离开可视范围时，输出该元素被隐藏的位置。

$(window).scroll(function() {
  // 计算元素与viewport的距离
  var elementTop = $('#element').offset().top;
  var elementBottom = elementTop + $('#element').outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  var distance = {
    'top': Math.abs(elementTop - viewportTop),
    'bottom': Math.abs(elementBottom - viewportBottom),
    'left': $('#element').offset().left,
    'right': $('body').width() - ($('#element').offset().left + $('#element').outerWidth())
  };

  // 判断元素是否进入了可视范围
  if (distance.top >= 0 && distance.bottom >= 0 && distance.left >= 0 && distance.right >= 0) {
    console.log('element is visible');
  } else {
    console.log('element is hidden with offset:', distance);
  }
});

该代码监听了 window 的 scroll 事件。在每次 scroll 事件触发时，都重新计算元素到 viewport 的距离，并根据元素是否在可视范围内进行输出。当元素进入可视范围内时，输出 'element is visible'，否则输出 'element is hidden with offset:' 需要注意的是，distance 对象中保存的是元素到 viewport 四周的距离。当元素都在 viewport 内时，四个距离值都是大于0的。当元素超出 viewport 范围时，distance 对象中会有一些负数的值。