一、使用 window.pageYOffset 和 window.pageXOffset
window.pageYOffset: 返回文档在垂直方向已滚动的像素值。
window.pageXOffset: 返回文档在水平方向已滚动的像素值。
window.addEventListener("scroll", function () {
const scrollY = window.pageYOffset;
const scrollX = window.pageXOffset;
console.log(`垂直滚动距离：${scrollY}，水平滚动距离：${scrollX}`);
});二、使用 document.documentElement.scrollTop 和 document.documentElement.scrollLeft
document.documentElement.scrollTop: 获取文档根元素 `<html>` 在垂直方向的滚动距离。
document.documentElement.scrollLeft: 获取文档根元素 `<html>` 在水平方向的滚动距离。
window.addEventListener("scroll", function () {
const scrollY = document.documentElement.scrollTop;
const scrollX = document.documentElement.scrollLeft;
console.log(`垂直滚动距离：${scrollY}，水平滚动距离：${scrollX}`);
});三、结合 IntersectionObserver API（用于更高级的滚动监听场景）
IntersectionObserver 可以观察目标元素与祖先元素或视口的交叉状态。可以利用它来监听滚动到特定元素的位置。
const targetElement = document.getElementById("target-element");
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
console.log("滚动到了目标元素");
}
});
});
observer.observe(targetElement);
扫一扫
2823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
