2018年的答案:

做到这一点的最好方法是使用交集观察者API。

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. Historically, detecting visibility of an element, or the relative visibility of two elements in relation to each other, has been a difficult task for which solutions have been unreliable and prone to causing the browser and the sites the user is accessing to become sluggish. Unfortunately, as the web has matured, the need for this kind of information has grown. Intersection information is needed for many reasons, such as: Lazy-loading of images or other content as a page is scrolled. Implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages. Reporting of visibility of advertisements in order to calculate ad revenues. Deciding whether or not to perform tasks or animation processes based on whether or not the user will see the result. Implementing intersection detection in the past involved event handlers and loops calling methods like Element.getBoundingClientRect() to build up the needed information for every element affected. Since all this code runs on the main thread, even one of these can cause performance problems. When a site is loaded with these tests, things can get downright ugly.

请看下面的代码示例:

Var选项= { 根:document.querySelector(“# scrollArea”), rootMargin:“0 px”, 阈值:1.0 ｝ var observer = new IntersectionObserver(回调，选项); var target = document.querySelector('#listItem'); observer.observe(目标);

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

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]

我这样做的Chrome上的<div>。

元素。scrollTop -由于滚动而隐藏在顶部的像素。如果没有滚动，它的值为0。

元素。scrollHeight -是整个div的像素。

元素。clientHeight -是你在浏览器中看到的像素。

var a = element.scrollTop;

将是位置。

var b = element.scrollHeight - element.clientHeight;

将是scrollTop的最大值。

var c = a / b;

将是滚动的百分比[从0到1]。

片段

窗口接口的只读scrollY属性返回 文档当前垂直滚动的像素数。

窗口。addEventListener(“滚动”,函数(){console.log (this.scrollY)}) html{高度:5000 px}

更短的版本使用匿名箭头函数(ES6)并避免使用此功能

窗口。addEventListener(“scroll”，)=>控制台。 html{高地:5000px}

我认为下面的函数可以帮助获得滚动坐标值:

const getScrollCoordinate = (el = window) => ({
  x: el.pageXOffset || el.scrollLeft,
  y: el.pageYOffset || el.scrollTop,
});

我从这个答案中得到了这个想法，只是做了一点改变。

2018年的答案:

做到这一点的最好方法是使用交集观察者API。

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. Historically, detecting visibility of an element, or the relative visibility of two elements in relation to each other, has been a difficult task for which solutions have been unreliable and prone to causing the browser and the sites the user is accessing to become sluggish. Unfortunately, as the web has matured, the need for this kind of information has grown. Intersection information is needed for many reasons, such as: Lazy-loading of images or other content as a page is scrolled. Implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages. Reporting of visibility of advertisements in order to calculate ad revenues. Deciding whether or not to perform tasks or animation processes based on whether or not the user will see the result. Implementing intersection detection in the past involved event handlers and loops calling methods like Element.getBoundingClientRect() to build up the needed information for every element affected. Since all this code runs on the main thread, even one of these can cause performance problems. When a site is loaded with these tests, things can get downright ugly.

请看下面的代码示例:

Var选项= { 根:document.querySelector(“# scrollArea”), rootMargin:“0 px”, 阈值:1.0 ｝ var observer = new IntersectionObserver(回调，选项); var target = document.querySelector('#listItem'); observer.observe(目标);

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