如何获取滚动窗口的x / y位置

介绍

在前端开发中，有时候需要获取滚动窗口的x / y位置。这可以用来实现一些自定义滚动效果、懒加载图片、自动填充表格等功能。本文将详细介绍如何获取滚动窗口的位置。

滚动窗口的位置

滚动窗口的位置指的是窗口在水平和垂直方向上的滚动距离。在浏览器端，我们可以通过 window.scrollX 和 window.scrollY 属性来获取滚动窗口的位置。其中，scrollX 表示水平方向上的滚动距离，scrollY 表示垂直方向上的滚动距离。

const x = window.scrollX; // 获取水平方向上的滚动距离
const y = window.scrollY; // 获取垂直方向上的滚动距离
console.log(`x: ${x}, y: ${y}`);

监听滚动事件

如果需要实时获取滚动窗口的位置，可以通过监听滚动事件来实现。在浏览器端，滚动事件分别为 scroll 和 wheel 事件。其中，scroll 事件在窗口滚动时触发，wheel 事件在鼠标滚轮滚动时触发。

通过 addEventListener 方法可以为滚动事件添加监听器：

window.addEventListener('scroll', handleScroll);

在监听器中，我们可以获取滚动窗口的位置：

function handleScroll() {
  const x = window.scrollX; // 获取水平方向上的滚动距离
  const y = window.scrollY; // 获取垂直方向上的滚动距离
  console.log(`x: ${x}, y: ${y}`);
}

应用示例

自定义滚动效果

假设我们需要实现一个自定义滚动效果，在页面滚动时，除了默认的滚动效果外，还会添加一些额外的动画效果。可以通过监听滚动事件来实现：

function handleScroll() {
  const y = window.scrollY; // 获取垂直方向上的滚动距离
  // 实现自定义滚动效果
  // ...
}

window.addEventListener('scroll', handleScroll);

懒加载图片

在一些网站中，为了提升页面加载速度，常常使用懒加载技术，即将图片的加载延迟到它们进入视口之前。可以通过监听滚动事件，并判断图片是否进入视口来实现懒加载：

<img data-src="image.jpg" alt="">

-- -------------------- ---- -------
-------- -------------- -
  ----- ------ - -------------------------------------------
  -------------------- -- -
    -- --------------------- -
      --------- - ------------------
      ----------------------------------
    -
  ---
-

-------- --------------------- -
  ----- ---- - --------------------------------
  ------ -
    ----------- - - --
    -------- - ------------------- -- --------------------------------------
  --
-

--------------------------------- --------------

自动填充表格

假设我们有一个数据列表，需要在页面滚动时动态地加载更多数据。可以通过监听滚动事件，并判断表格是否滚动到底部来实现自动填充：

<table>
  <tbody id="list">
    <!-- 初始数据 -->
  </tbody>
</table>

-- -------------------- ---- -------
--- ---- - --

-------- -------------- -
  ----- ---- - --------------------------------
  -- ------------------ - -------------- --- ------------------ -
    -- -----
    ---------------------
  -
-

-------- ------------------ -
  -- -------

- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------