您可以使用element.scrollTop和element.scrollLeft分别获取已滚动的垂直和水平偏移量。element可document.body如果你关心整个页面。如果您需要百分比，您可以将它与element.offsetHeight和element.offsetWidth（同样，element可能是身体）进行比较。

我<div>在 Chrome 上做了这个。

element .scrollTop - 由于滚动而隐藏在顶部的像素。没有滚动时，其值为 0。

element .scrollHeight - 是整个 div 的像素。

element .clientHeight - 是您在浏览器中看到的像素。

var a = element.scrollTop;

将是位置。

var b = element.scrollHeight - element.clientHeight;

将是最大的valuescrollTop的。

var c = a / b;

将是滚动的百分比[from 0 to 1]。

document.getScroll = function() {
    if (window.pageYOffset != undefined) {
        return [pageXOffset, pageYOffset];
    } else {
        var sx, sy, d = document,
            r = d.documentElement,
            b = d.body;
        sx = r.scrollLeft || b.scrollLeft || 0;
        sy = r.scrollTop || b.scrollTop || 0;
        return [sx, sy];
    }
}

返回一个包含两个整数的数组 - [scrollLeft, scrollTop]

就像这样 ：）

window.addEventListener("scroll", (event) => {
    let scroll = this.scrollY;
    console.log(scroll)
});

2018 年的答案：

执行此类操作的最佳方法是使用Intersection Observer API。

Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法。

从历史上看，检测一个元素的可见性，或两个元素相互之间的相对可见性，一直是一项艰巨的任务，解决方案不可靠并且容易导致浏览器和用户访问的站点变得缓慢。不幸的是，随着网络的成熟，对此类信息的需求也在增长。需要交点信息的原因有很多，例如：

• 在页面滚动时延迟加载图像或其他内容。
• 实施“无限滚动”网站，在您滚动时加载和呈现越来越多的内容，这样用户就不必翻阅页面。
• 报告广告的可见性以计算广告收入。
• 根据用户是否会看到结果来决定是否执行任务或动画处理。

过去实现交叉检测涉及事件处理程序和循环调用方法，如 Element.getBoundingClientRect() 为每个受影响的元素构建所需的信息。由于所有这些代码都在主线程上运行，即使其中之一也会导致性能问题。当一个站点加载了这些测试时，事情会变得非常丑陋。

请参阅以下代码示例：

var options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

var target = document.querySelector('#listItem');
observer.observe(target);

大多数现代浏览器都支持 IntersectionObserver，但为了向后兼容，您应该使用polyfill。