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

Question

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

Answer 1

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

Answer 2

我<div>在Chrome上做了这个.

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

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

document.body.getBoundingClientRect().top

Answer 6

片段

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

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

html{height:5000px}

使用匿名箭头函数（ES6）并避免使用的较短版本this

window.addEventListener('scroll', () => console.log(scrollY))

html{height:5000px}

Answer 7

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.

Answer 8

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

此处的文档-> http://api.jquery.com/scrollTop/

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

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