JavaScript中scrollY属性的作用
在Web开发中，有时候需要获取网页滚动条滚动的位置，例如在实现页面懒加载、无限滚动等功能时，都需要用到滚动条的位置。而JavaScript中的scrollY属性就是专门用来获取垂直方向上滚动条滚动的距离。
scrollY属性的定义
scrollY 属性返回文档在垂直方向已经滚动的像素值，以像素为单位，这个属性是只读的。如果文档不存在垂直方向的滚动条，则这个属性的值为0。
使用scrollY属性
使用 scrollY 属性获取垂直方向上滚动条的位置非常简单，只需要通过window对象调用该属性即可：
let scrollTop = window.scrollY;
console.log(scrollTop);
上述代码可以获取浏览器窗口Document上方的文档内容已经滚动的像素值，并将该值赋值给一个名为 scrollTop 的变量。如果文档内容尚未发生滚动，则可以显示值为0。
scrollY的应用场景
在前端开发中，scrollY 属性非常常见的应用场景是实现页面的懒加载和无限滚动功能。
页面懒加载
页面懒加载是指当用户访问网页时，先加载页面的部分内容，然后在滚动到可见区域时再加载剩余的内容。懒加载可以有效地减轻服务器的负载，同时也可以加快页面的加载速度，提高用户体验。比如下面的代码：
<img src="placeholder.jpg" data-src="real_picture.jpg" alt="懒加载图片">
这是一个图片标签，首先它的 src 属性初始化为一个小图片，使用data-src 属性存放真实的大图片地址。在页面加载时，浏览器将只会加载小图片，当用户滚动到该图片可见区域时才会加载真实图片，实现一种“延迟”加载的效果。
当然，要实现懒加载，还需要JavaScript的代码来实现滚动事件的监听以及判断当前元素是否在可见范围内。判断元素是否在可见区域，与是否在垂直方向上超出浏览器窗口范围有关。
无限滚动
无限滚动是指当用户滚动到页面底部时，自动加载下一页的内容，通过这种方式实现类似“无限滚动”的效果。下面是一个简单的实现无限滚动的代码：
function loadMore(){
// 模拟向后台请求下一页数据
let nextPageData = requestNextPageData();
// 对页面进行更新
updatePage(nextPageData);
}
window.addEventListener('scroll', function(){
// 页面滚动时
let scrollTop = window.scrollY, // 获取文档在垂直方向已经滚动的像素值
windowHeight = window.innerHeight, // 获取浏览器窗口的高度
documentHeight = document.body.scrollHeight; // 获取文档的高度
// 判断是否在页面底部并执行加载操作
if(scrollTop + windowHeight >= documentHeight - 50){
loadMore();
}
})
当滚动条滚动到页面的底部时，scrollY 属性获取的值就会超出文档内容的高度，此时就需要通过监听页面滚动事件，并判断是否触发了滚动到底部的条件，来执行下一页数据的加载操作。
总结
scrollY属性 是JavaScript中用来获取网页在垂直方向上滚动条滚动的位置的属性。它通过window对象调用，可以获取文档在垂直方向上已经滚动的像素值。scrollY属性在前端开发中非常常见，并且常用于实现页面懒加载和无限滚动等功能，为升级用户体验提供了重要帮助。