如何使用Javascript获取滚动条位置？

我正在尝试使用JavaScript检测浏览器的滚动条的位置，以确定当前视图在页面中的位置。我的猜测是，我必须检测轨道上的拇指在哪里，然后检测拇指的高度占轨道总高度的百分比。我是不是过于复杂了，还是JavaScript提供了比这更简单的解决方案？任何想法代码明智？

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

我这样做是为了<div>在Chrome上进行的。

元素.scrollTop-是由于滚动而隐藏在顶部的像素。不滚动时，其值为0。

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

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

var a = element.scrollTop;

将是职位。

var b = element.scrollHeight - element.clientHeight;

将是最大的价值scrollTop的。

var c = a / b;

将是滚动百分比[从0到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", function (event) {
    var 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来实现向后兼容。

如果您关心整个页面。您可以使用此：

document.body.getBoundingClientRect().top

如果您使用的是jQuery，则有一个完美的功能：.scrollTop（）

在这里doc-> http://api.jquery.com/scrollTop/

注意：您可以使用此功能来检索或设置位置。

另请参阅：http : //api.jquery.com/?s=scroll

这是获取滚动位置的另一种方法

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

我认为以下功能可以帮助获得滚动坐标值：

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

我从这个答案中得到了这个想法，但做了一点改动。