Question

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

Answer 1

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

Answer 2

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

元素 .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", 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);

由于browser support不是很好，您应该使用IntersectionObserver polyfill。

Answer 6

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

doc here - ＆gt; http://api.jquery.com/scrollTop/

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

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

Answer 7

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

document.querySelector("body").getBoundingClientRect().top

Answer 8

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

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

Answer 9

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

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

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

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

9 个答案: