在前端开发中，我们经常需要检测页面的滚动位置来实现一些效果，比如懒加载、无限滚动等。本文将介绍如何使用 jQuery 检测页面的滚动位置，并提供示例代码。
获取滚动位置
jQuery 提供了两种方式获取页面的滚动位置：scrollTop() 和 scrollLeft()。
scrollTop()
scrollTop() 方法返回或设置匹配元素相对于其顶部的偏移量。如果有多个匹配元素，则只返回第一个元素的值。
$(window).scrollTop();
scrollLeft()
scrollLeft() 方法返回或设置匹配元素相对于其左侧的偏移量。如果有多个匹配元素，则只返回第一个元素的值。
$(window).scrollLeft();
滚动事件
jQuery 还提供了 scroll() 方法来监听页面的滚动事件。
$(window).scroll(function() {
// code here
});当页面被滚动时，scroll() 方法会被触发。在回调函数中，可以通过 scrollTop() 或 scrollLeft() 方法获取当前滚动位置。
示例代码
下面是一个示例代码，实现了当页面滚动到特定位置后，显示一个提示框。
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- -----------------
------- -----------------------------------------------------------
-------
------ -
-------- -----
--------- ------
---- ----
----- ----
---------- --------------- ------
-------- -----
----------------- -----
------- --- ----- -----
-------------- ----
-
--------
-------
------
-------- ----- ----- --- ----- ----------- ---------- ----- ------- -------- ---- --- ------- ---------- ---- ---- ---------- ----- -- -------- ------ ---- - ------ ----- -- ---- --- ------ --------- ------- ----- -- ----- --------- ------- ---- -----------
-------- -------- ----- ------- ------- ------ --- ----- --------- ----- ----------- -------- ---- -- --------- ----- -- --------- ------- ----- -- ------- ----- ----- ------ ---- --- --- -------- --------- --- ------ ------- -------- -- ----- --- --------- ------ ----------
------------- ---- ----- ------ -- -------- ---- ------ -- -------- ------- ------- ------ ------------ -------- ----- --------- -------- -- ----- -- --------- ----- -- ------ -------- ----- ------ --- ----- ----- -------- -------- ------- ---- -- - ----- ----------- -------------
---------- -- --------- ------ ----- -- -------- ----- --- ------ ---- ---- ----- ------- --- ------- ---- ---------- --- -- ---- --- ----- --------- --------- -- -- ------- ----- --- ---- ---- --- ----- ------- ------ ----- --- ---- ---- ----- -------- ------ -- ------ ------------ -- --------- ---- ------------
---------- -- ----- -------- -------- --- ----- --------- --- ---- -- ----- ------- ------ -------- -------- -------- -- -- --------- ----- ---- ----------- ------- ----- -- --------- ---- --- ---- --- ---- -------- -------- ---- ---- -----------
---- -------------- ---- -------- -- --- ------ -- --- -----------
--------
--------------------------- -
-- ---------------------- - ------------------ -- --------------------- -
-------------------
-
---
---------
-------
-------在这个示例中，当页面滚动到底部时，会显示一个提示
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10171
