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

Question

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

Answer 1

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

Answer 2

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

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

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

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

var a = element.scrollTop;

将是这个职位。

var b = element.scrollHeight - element.clientHeight;

将是scrollTop的最大值。

var c = a / b;

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

Answer 3

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]

Answer 4

就像这样 ：）

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

Answer 5

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);

大多数现代浏览器support the IntersectionObserver，但你应该使用polyfill向后兼容。

Answer 6

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

doc here - > http://api.jquery.com/scrollTop/

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

另见：http://api.jquery.com/?s=scroll

Answer 7

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

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