Onscroll事件- 一个带有人类情感的交互体验

什么是Onscroll事件?

Onscroll事件是一个可以添加到HTML元素上的JavaScript事件，它会在用户滚动页面时触发。这个事件可以用来实现一些有趣的交互效果，比如滚动到特定位置时弹出提示框或是懒加载图片。

window.onscroll = function() {
  // 在这里编写你的代码
}

如何使用Onscroll事件?

使用Onscroll事件非常简单，只需要将它添加到需要滚动监听的元素上即可。比如，如果你需要监听整个页面的滚动事件，可以将事件添加到window对象上。如果你只需要监听某个特定的区域，可以将事件添加到该区域的父元素上。

// 监听整个页面的滚动事件
window.onscroll = function() {
  // 在这里编写你的代码
}

// 监听特定区域的滚动事件
var parentElement = document.getElementById('parent');
parentElement.onscroll = function() {
  // 在这里编写你的代码
}

Onscroll事件的应用场景

Onscroll事件可以应用在很多地方，下面我们来看看一些有趣的实例。

1. 滚动到特定位置时弹出提示框

你是否曾经遇到过这样的情况：当你滚动到页面底部时，弹出一个提示框告诉你已经到底了。那么，如何实现这个效果呢？

window.onscroll = function() {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    alert('已经到底了！');
  }
}

上述代码中，我们首先判断页面的可视高度和滚动距离之和是否大于或等于页面的总高度，如果是，则弹出提示框。

2. 图片懒加载

图片懒加载是一种优化网页性能的方法，它可以延迟加载页面上的图片，从而提高页面加载速度。

// 获取所有带有 data-src 属性的图像元素
const images = document.querySelectorAll('img[data-src]');

// 获取窗口的可视高度
const windowHeight = window.innerHeight;

// 惰性加载函数
function lazyLoad() {
  for (let i = 0; i < images.length; i++) {
    const image = images[i];
    const rect = image.getBoundingClientRect();
    
    // 判断图像是否在可视范围内
    if (rect.top < windowHeight) {
      // 将 data-src 属性的值赋给 src，实现图像加载
      image.src = image.dataset.src;
      
      // 移除 data-src 属性，避免重复加载
      image.removeAttribute('data-src');
    }
  }
}

// 监听页面滚动事件，在滚动时触发惰性加载函数
window.addEventListener('scroll', lazyLoad);