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

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

您可以使用和分别获取已滚动的垂直和水平偏移量。如果您关心整个页面，则可以是

document.body

。如果需要百分比，可以将其与和（同样，

元素

可能是主体）进行比较

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上为一个

执行了此操作

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

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

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

var a = element.scrollTop;

将是这个职位

var b = element.scrollHeight - element.clientHeight;

将是scrollTop的最大值

---

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

如果您使用jQuery，则有一个非常适合您的函数：.scrollTop（）

文档在此->

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

var b = element.scrollHeight - element.clientHeight;

---

另请参见：2018年的答案：

做这类事情的最好方法是使用

交叉点观察者API提供了一种异步观察的方法 目标元素与祖先元素交集的更改 元素或具有顶级文档的视口

历史上，检测元素或相对元素的可见性 两个元素之间相互关系的可见性一直是一个重要问题 解决方案不可靠且容易出错的困难任务 导致浏览器和用户正在访问的站点变为 行动迟缓的不幸的是，随着网络的成熟，这种需求 这种信息越来越多。需要交叉口信息来进行交通管理 原因很多，例如：

• 页面滚动时图像或其他内容的延迟加载
• 实现“无限滚动”网站，在滚动时加载和呈现越来越多的内容，这样用户就不会 我必须翻阅书页
• 报告广告的可见性，以计算广告收入
• 根据用户是否看到结果来决定是否执行任务或动画过程

在过去涉及的事件中实现交叉口检测 处理程序和循环调用方法，如 元素。getBoundingClientRect（）来为 每个因素都受到影响。由于所有这些代码都在主线程上运行， 即使是其中一个也可能导致性能问题。当一个站点 通过这些测试，事情会变得非常糟糕

请参见以下代码示例：

大多数现代浏览器，但为了向后兼容，您应该使用

---

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

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

---

如果你喜欢整页的话。您可以使用以下选项：

---

document.body.getBoundingClientRect（）.top

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

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

---

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

您使用的是什么浏览器？在不同的浏览器中获取主体的方式不同（

element

和

document.body

只是示例）。有关详细信息，请参阅。我在Firefox 3.6上使用

window.pageYOffset

获得了正确的值，但在IE7上无法获得任何工作。尝试了

window.pageYOffset

，

document.body.scrollTop

，

document.documentElement.scrollTop

，

element.scrollTop

仅在我添加括号时对我有效$（“.scrollBody”）.scrollTop（）如果处理“window”元素，可以使用window.scrollY而不是window.scrollTop。我认为在大多数现代浏览器中，

document.body

上没有设置滚动位置-现在通常设置在

document.documentElement

上。有关Chrome的转换，请参阅。通过示例演示如何使用此函数会非常好。我想您可以使用此lastscroll=getScroll（）；scrollTo（lastcoll[0]，lastcoll[1]）；很好，但我更改了返回到带有x和y键的对象，因为这对我来说更有意义。根据@user18490的注释进行编辑。引用错误：找不到变量：元素这几乎是正确的。对于var b，您应该减去window.innerHeight而不是element.clientHeight。为什么要用JS库来回答关于JS的问题，而在原始JS中完全可以甚至很方便地这样做呢？你只是要求他增加额外的加载时间，并为一些完全不必要的东西占用一些存储空间。另外，javascript什么时候开始有了JQuery的含义？如果你单独问我，我从来都不喜欢JQuery，我也没有回答这个问题，但在Vanilla JS中，其他人已经给出了答案，那么如果有人在这个帖子中添加了美味的香料，那又有什么问题呢。（他已经提到，如果你使用JQuery）@R01010010这是因为现在的JQuery是无用的和反作用的，JQuery中的所有功能都很容易用VanilaJS实现，而且你也变得依赖于JQuery中的内容，随着VanillsaJS中的新功能可用，你作为程序员，不会更新，就像示例一样，现在，VanillaJS中有一个名为fetch的新API取代了旧的XHR，如果你只是在JQuery的世界里，你将永远看不到fetch的好处并继续使用JQuery.ajax（）。我个人的观点是，继续使用JQuery的人是因为他们停止了学习。另外，VanillaJS比香草js更快。com@JohnBalvinArias会说话的ab

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