当我们在构建网页时，可能需要根据用户的滚动位置来触发某些操作。比如，实现一个懒加载的功能，在用户滚动到页面底部时自动加载更多内容。那么，如何检测如果浏览器窗口滚动到下？
滚动事件
在 JavaScript 中，可以使用 onscroll 事件来监听浏览器窗口的滚动状态。当用户滚动窗口时，会触发该事件，我们可以在回调函数中对滚动位置进行判断。
window.onscroll = function() {
// 判断是否滚动到底部
}监听元素滚动
除了监听整个浏览器窗口的滚动事件外，我们还可以监听元素的滚动事件。这在一些特定场景中比较有用，比如只想在某个固定区域内触发操作。
const element = document.querySelector('#scrollable-element')
element.addEventListener('scroll', function() {
// 判断是否滚动到底部
})判断是否滚动到底部
要判断是否滚动到底部，我们需要获取当前页面的滚动高度、可视区域高度以及页面总高度三个参数。我们可以通过以下方式获取：
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop const clientHeight = document.documentElement.clientHeight || window.innerHeight const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
其中，scrollTop 表示当前滚动位置的高度，clientHeight 表示可视区域的高度，scrollHeight 表示页面总高度。由于不同浏览器可能会有兼容性问题，我们需要使用 || 运算符来获取兼容的值。
接下来，我们就可以根据这三个参数来判断是否滚动到了底部：
if (scrollTop + clientHeight >= scrollHeight) {
// 滚动到底部了
}示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -----------------
-------
------
---- ----------------------- -------------- ------ ----------- ---------
----
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- -------
-----
------
--------
----- ------- - ---------------------------------------------
---------------------------------- ---------- -
----- --------- - -----------------
----- ------------ - --------------------
----- ------------ - --------------------
-- ---------- - ------------ -- ------------- -
---------------------
-
--
---------
-------
-------在这个示例中，我们创建了一个带有滚动条的 div 元素，并监听其滚动事件。当滚动到底部时，会输出一条日志信息。
总结
通过以上方法，我们可以轻松地检测用户是否已经滚动到页面底部。这在懒加载、分页加载等场景中都非常有用。同时，我们也可以根据此思路扩展出更多与滚动相关的功能，如滚动到某个位置后触发操作等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10757
