我正在尝试使用 JavaScript 检测浏览器滚动条的位置,以确定当前视图在页面中的位置。
我的猜测是,我必须检测轨道上拇指的位置,然后检测拇指的高度占轨道总高度的百分比。我是否过于复杂了,还是 JavaScript 提供了比这更简单的解决方案?一些代码会是什么样子?
您可以使用 element.scrollTop
和 element.scrollLeft
分别获取已滚动的垂直和水平偏移量。如果您关心整个页面,element
可以是 document.body
。如果您需要百分比,可以将其与 element.offsetHeight
和 element.offsetWidth
(同样,element
可能是主体)进行比较。
我在 Chrome 上为 <div>
做了这个。
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]。
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]
就像这样 :)
window.addEventListener("scroll", (event) => {
let scroll = this.scrollY;
console.log(scroll)
});
this
指的是 window
。 scrollY
是 window
的属性
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');观察者.观察(目标);
大多数现代浏览器 support the IntersectionObserver,但您应该使用 polyfill 来实现向后兼容。
如果你关心整个页面,你可以使用这个:
document.body.getBoundingClientRect().top
如果您使用的是 jQuery,那么有一个完美的功能适合您:.scrollTop()
文档在这里-> http://api.jquery.com/scrollTop/
注意:您可以使用此功能检索或设置位置。
另见:http://api.jquery.com/?s=scroll
这是获取滚动位置的另一种方法:
const getScrollPosition = (el = window) => ({
x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});
片段
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}
我认为以下功能可以帮助获得滚动坐标值:
const getScrollCoordinate = (el = window) => ({
x: el.pageXOffset || el.scrollLeft,
y: el.pageYOffset || el.scrollTop,
});
我从 this answer 得到了这个想法,但做了一点改动。
element
和document.body
只是示例)。有关详细信息,请参阅 howtocreate.co.uk/tutorials/javascript/browserwindow。window.pageYOffset
为我提供正确的值,但在 IE7 上无法正常工作。试过window.pageYOffset
、document.body.scrollTop
、document.documentElement.scrollTop
、element.scrollTop
document.body
上 - 现在通常设置在document.documentElement
上。有关 Chrome 的转换,请参见 bugs.chromium.org/p/chromium/issues/detail?id=157855。