计算页面各个部分到当前元素的距离问题

哈喽，大家好哇！今天大冰块来谈谈获取当前元素到页面各个部分的距离问题。

在进行懒加载的逻辑时，经常会遇到各种获取距离问题，比如获取当前元素到页面底部的距离，获取文档网页底部到可视区窗口距离，获取各个元素到页面顶部的距离。这个过程可以用纯JS计算实现，而jQuery中提供一些封装好的便捷接口。

具体用法如下：

1. 获取元素到页面底部的距离

// 使用纯JS计算
const element = document.getElementById("element");
const scrollTop = document.documentElement.scrollTop;
const clientHeight = document.documentElement.clientHeight;
const elementRect = element.getBoundingClientRect();
const bottomDistance = clientHeight - (elementRect.top + elementRect.height - scrollTop);

// 使用jQuery
const $element = $("#element");
const bottomDistance = $element.offset().top + $element.height() - $(document).scrollTop() - $(window).height();

2. 获取文档网页底部到可视区窗口距离

// 使用纯JS计算
const scrollTop = document.documentElement.scrollTop;
const clientHeight = document.documentElement.clientHeight;
const scrollHeight = document.documentElement.scrollHeight;
const bottomDistance = scrollHeight - (scrollTop + clientHeight);

// 使用jQuery
const bottomDistance = $(document).height() - $(window).height() - $(window).scrollTop();

3. 获取各个元素到页面顶部的距离

// 使用纯JS计算
const element = document.getElementById("element");
const scrollTop = document.documentElement.scrollTop;
const elementRect = element.getBoundingClientRect();
const topDistance = elementRect.top + scrollTop;

// 使用jQuery
const $element = $("#element");
const topDistance = $element.offset().top;

希望这些对您有所帮助，我们下期再见！