如何使用 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。

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

元素.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", (event) => {
    let 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

如果您关心整个页面。你可以用这个：

document.body.getBoundingClientRect().top

Answer 7

如果你使用 jQuery，有一个完美的函数适合你：.scrollTop()

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

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

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

Answer 8

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

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

Answer 9

片段

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

window.addEventListener("scroll", function(){  console.log(this.scrollY)  })

html{height:5000px}

使用 JavaScript ES6 并避免使用 this

的较短版本

window.addEventListener("scroll", () => { console.log(scrollY) })

html{height:5000px}

Answer 10

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

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

我从this answer 得到这个想法，做了一点改动。