JS滚动位置获取方法详解

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《JavaScript滚动位置获取技巧》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

本教程旨在解决JavaScript滚动事件中因错误使用`window.screenY`导致视差效果或其他基于滚动位置的功能失效的问题。我们将详细讲解如何通过`window.pageYOffset`或`document.documentElement.scrollTop`等标准属性准确获取页面的垂直滚动位置，并提供修正后的代码示例，确保您的滚动交互逻辑能够稳定运行。

在现代网页设计中，许多动态视觉效果，如视差滚动、粘性导航栏或滚动进度指示器，都依赖于JavaScript对页面滚动事件的精确处理。然而，一个常见的实现陷阱是未能正确获取页面的当前滚动位置，这可能导致预期的交互行为失效或出现异常。

理解错误的滚动位置获取方式

在JavaScript中，开发者有时会错误地尝试使用window.screenY来获取页面的垂直滚动位置。然而，window.screenY属性实际上返回的是浏览器窗口（包括其边框和标题栏）相对于用户屏幕顶部的Y坐标，而不是文档在视口中滚动的距离。因此，将其用于计算页面滚动效果会导致逻辑错误，使得基于滚动距离的动画或定位无法正常工作。

以下是原始代码中错误使用window.screenY的示例：

window.addEventListener("scroll", function() {
  let value = window.screenY; // 错误的使用方式，获取的是浏览器窗口的屏幕坐标
  // 后续的元素样式计算将基于错误的滚动值
});

当使用上述代码尝试实现视差滚动效果时，由于value并不能正确反映页面的滚动距离，导致所有依赖此值的元素动画表现异常。

正确获取页面滚动位置的方法

为了在JavaScript中准确获取页面的垂直滚动位置，我们应该使用以下两种更标准和可靠的方法：

1. window.pageYOffset: 这是获取文档在垂直方向已滚动的像素值的推荐方法。它是一个只读属性，兼容性良好，并且在所有现代浏览器中都有效。
2. document.documentElement.scrollTop: 这个属性也返回文档的垂直滚动距离。在标准模式下，document.documentElement（即元素）通常是文档的滚动容器。

为了最大化兼容性，尤其是在处理一些旧版浏览器或不同文档模式时，通常会结合使用这两个属性。一种常见的模式是使用逻辑或运算符（||）来提供一个回退方案。

以下是修正后的代码示例，展示了如何正确获取滚动位置并应用到视差效果中：

let stars = document.getElementById('stars');
let moon = document.getElementById('moon');
let mountain_behind = document.getElementById('mountain-behind');
let mountain_front = document.getElementById('mountain-front');
let btn = document.getElementById('btn');
let text = document.getElementById('text');

window.addEventListener("scroll", function() {
  // 推荐的兼容性获取滚动位置的方法
  var doc = document.documentElement;
  // 使用 window.pageYOffset 或 document.documentElement.scrollTop，并处理 clientTop 偏移
  var value = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);

  // 根据正确的滚动值应用视差效果
  stars.style.left = value * 0.25 + 'px';
  moon.style.top = value * 1.05 + 'px';
  mountain_behind.style.top = value * 0.5 + 'px';
  mountain_front.style.top = value * 0 + 'px';
  text.style.marginRight = value * 4 + 'px';
  text.style.marginTop = value * 1.5 + 'px';
  btn.style.marginTop = value * 1.5 + 'px';
});

HTML结构与CSS设置（确保可滚动性）

为了使页面能够滚动并触发滚动事件，需要确保HTML内容足够长，或者通过CSS设置body或html元素的高度，使其超出视口高度。

HTML结构示例：

<section>
  <img src="img/stars.png" id="stars">
  <img src="img/moon.png" id="moon">
  <img src="img/mountains_behind.png" id="mountain-behind">
  <h2 id="text">Genesis 2k22</h2>
  <a href="#sec" id="btn" class="btn">Register Now</a>
  <img src="img/mountains_front.png" id="mountain-front">
</section>

CSS样式示例：

body, html {
  height: 1000px; /* 确保页面有足够的滚动高度以触发滚动事件 */
  margin: 0;     /* 移除默认外边距 */
  padding: 0;    /* 移除默认内边距 */
}
/* 其他样式，例如对 img 和 h2 的定位 */
section {
  position: relative;
  width: 100%;
  height: 100vh; /* 初始视口高度 */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* 避免图片阻挡事件 */
}
#text {
  position: absolute;
  font-size: 5em;
  color: #fff;
  white-space: nowrap;
  z-index: 9;
}
#btn {
  position: absolute;
  display: inline-block;
  padding: 8px 30px;
  background: #fff;
  border-radius: 40px;
  color: #262626;
  font-size: 1.2em;
  text-decoration: none;
  z-index: 9;
  transform: translateY(100px); /* 初始位置调整 */
}

注意事项

• 兼容性考量： window.pageYOffset在所有现代浏览器中都得到了广泛支持。对于旧版IE，document.documentElement.scrollTop是首选。代码中的doc.clientTop || 0是一个小技巧，用于处理某些浏览器在计算scrollTop时可能包含边框宽度的情况，虽然在大多数现代场景下可能不是必需的，但保留可以增加代码的健壮性。
• 滚动事件的性能： 滚动事件在短时间内可能会触发多次。如果事件处理函数中包含复杂的计算或DOM操作，可能会导致性能问题，影响用户体验。建议使用节流（throttle）或防抖（debounce）技术来限制事件处理函数的执行频率，或者使用requestAnimationFrame来优化动画性能，确保动画流畅。
• 滚动目标： 确保你监听的滚动事件是在正确的元素上。通常，页面整体的滚动事件是绑定在window对象上的。如果仅是某个特定容器内部的滚动，则应监听该容器元素的scroll事件。

总结

正确获取页面的滚动位置是实现各种基于滚动交互效果的关键。开发者应避免使用window.screenY这类不适用于获取页面滚动距离的属性，而应采纳window.pageYOffset或document.documentElement.scrollTop来确保代码的健壮性和跨浏览器兼容性。在实现复杂的滚动效果时，同时考虑性能优化策略，如节流或使用requestAnimationFrame，将有助于提供流畅且响应迅速的用户体验。通过遵循这些最佳实践，您可以构建出更加稳定和高性能的网页滚动交互功能。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS滚动位置获取方法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。