我如何能得到滚动条的位置与JavaScript?

我试图用JavaScript检测浏览器滚动条的位置，以确定当前视图在页面中的位置。

我的猜测是，我必须检测拇指在轨道上的位置，然后是拇指的高度占轨道总高度的百分比。是我过于复杂了，还是JavaScript提供了一个更简单的解决方案?代码会是什么样子?

714906 次浏览
小开
最佳答案

你可以使用element.scrollTop和element.scrollLeft分别获得已滚动的垂直和水平偏移量。如果你关心整个页面，element可以是document.body。如果需要百分比，可以将其与element.scrollLeft0和element.scrollLeft1(同样，element可能是主体)进行比较。

小开 
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上的<div>。

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

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

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

var a = element.scrollTop;

将是位置。

var b = element.scrollHeight - element.clientHeight;

将是scrollTop的最大值。

var c = a / b;

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

小开

如果你正在使用jQuery，这里有一个完美的函数:.scrollTop()

doc这里-> http://api.jquery.com/scrollTop/

注意:你可以使用这个函数来检索或设置位置。

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

小开

2018年的答案:

这样做的最好方法是使用交集观察者API。

交集观察者API提供了一种异步观察的方法 目标元素与祖先元素交集的变化 元素或顶级文档的视口

在历史上，检测一个元素的可见性，或相对 可见两个元素之间的关系，已经是一个了 困难的任务，解决方案是不可靠的，容易 导致浏览器和用户正在访问的网站变成 缓慢。不幸的是，随着网络的成熟，对这个的需求 信息量越来越大。交叉口信息是需要的 原因很多，比如:

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

在过去涉及的事件中实现交集检测 处理程序和循环调用类似的方法 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向后兼容。

小开

是这样的:)

window.addEventListener("scroll", (event) => {
let scroll = this.scrollY;
console.log(scroll)
});
小开

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

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

我从这个答案得到了这个想法，并做了一点改变。

小开

片段

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

. 

window.addEventListener('scroll', function(){console.log(this.scrollY)})
html{height:5000px}

更短的版本使用匿名箭头函数(ES6)，并避免使用this

window.addEventListener('scroll', () => console.log(scrollY))
html{height:5000px}


提交答案