如何使用 JavaScript 获取滚动条位置43

滚动条是网页中常用的元素，用于允许用户在超出浏览器窗口尺寸的内容区域中滚动页面。JavaScript 提供了多种方法来获取滚动条的当前位置，从而允许开发人员创建动态的交互式网页。

scrollTop 和 scrollLeft 属性

要获取垂直滚动条的位置，可以使用 scrollTop 属性。此属性返回页面顶部的偏移量，以像素为单位。类似地，scrollLeft 属性返回水平滚动条的位置，以像素为单位。
const scrollTop = ;
const scrollLeft = ;

和 属性

除了 scrollTop 和 scrollLeft 属性外，window 对象还提供了 pageYOffset 和 pageXOffset 属性，它们返回与 scrollTop 和 scrollLeft 相同的滚动条位置，但它们不受文档模式的影响。
const pageYOffset = ;
const pageXOffset = ;

和 属性

当页面滚动事件发生时，事件对象包含 pageY 和 pageX 属性，它们返回与 pageYOffset 和 pageXOffset 相同的滚动条位置。
('scroll', (e) => {
const scrollY = ;
const scrollX = ;
});

获取文档高度

除了获取滚动条位置外，还可以获取文档的高度。这可以通过将 scrollHeight 属性与当前滚动条位置相加来实现。
const documentHeight = ;

示例

以下代码段使用 scrollTop 属性获取垂直滚动条的位置并将其显示在控制台中：
();

以下代码段使用 scroll 事件监听器获取每当页面滚动时滚动条位置：
('scroll', () => {
(, );
});

通过使用 JavaScript，开发人员可以轻松地获取滚动条的位置和文档的高度。这些信息可以用来创建动态的内容、响应用户输入并改善整体用户体验。

2025-02-17

上一篇：JavaScript 闭包的奥秘：了解作用域和数据封装

下一篇：如何在 JavaScript 中将字符串转换为小写