获取元素到屏幕四周的可视距离，一般需要通过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 对象中会有一些负数的值。