介绍
在前端开发中，有时候需要获取滚动窗口的x / y位置。这可以用来实现一些自定义滚动效果、懒加载图片、自动填充表格等功能。本文将详细介绍如何获取滚动窗口的位置。
滚动窗口的位置
滚动窗口的位置指的是窗口在水平和垂直方向上的滚动距离。在浏览器端，我们可以通过 window.scrollX 和 window.scrollY 属性来获取滚动窗口的位置。其中，scrollX 表示水平方向上的滚动距离，scrollY 表示垂直方向上的滚动距离。
----- - - --------------- -- ------------ ----- - - --------------- -- ------------ --------------- ----- -- -------
监听滚动事件
如果需要实时获取滚动窗口的位置，可以通过监听滚动事件来实现。在浏览器端，滚动事件分别为 scroll 和 wheel 事件。其中，scroll 事件在窗口滚动时触发，wheel 事件在鼠标滚轮滚动时触发。
通过 addEventListener 方法可以为滚动事件添加监听器：
--------------------------------- --------------
在监听器中，我们可以获取滚动窗口的位置：
-------- -------------- - ----- - - --------------- -- ------------ ----- - - --------------- -- ------------ --------------- ----- -- ------- -
应用示例
自定义滚动效果
假设我们需要实现一个自定义滚动效果，在页面滚动时，除了默认的滚动效果外，还会添加一些额外的动画效果。可以通过监听滚动事件来实现：
-------- -------------- - ----- - - --------------- -- ------------ -- --------- -- --- - --------------------------------- --------------
懒加载图片
在一些网站中，为了提升页面加载速度，常常使用懒加载技术，即将图片的加载延迟到它们进入视口之前。可以通过监听滚动事件，并判断图片是否进入视口来实现懒加载：
---- -------------------- -------
-------- -------------- -
----- ------ - -------------------------------------------
-------------------- -- -
-- --------------------- -
--------- - ------------------
----------------------------------
-
---
-
-------- --------------------- -
----- ---- - --------------------------------
------ -
----------- - - --
-------- - ------------------- -- --------------------------------------
--
-
--------------------------------- --------------自动填充表格
假设我们有一个数据列表，需要在页面滚动时动态地加载更多数据。可以通过监听滚动事件，并判断表格是否滚动到底部来实现自动填充：
-------
------ ----------
---- ---- ---
--------
----------- ---- - --
-------- -------------- -
----- ---- - --------------------------------
-- ------------------ - -------------- --- ------------------ -
-- -----
---------------------
-
-
-------- ------------------ -
-- -------
- ---------------------------------------------------------- --------
-------------------------------------------------------------------------------------