HTML | DOM 滚动事件

HTML和DOM中有一些事件可以捕捉到用户滚动页面的操作。这些事件可以用于制作一些与滚动有关的特效或功能，比如背景图片随着页面的滚动而移动。

scroll 事件

scroll事件在用户滚动页面时触发，可以被应用于页面中的任何元素，不仅仅是window对象。通过监听scroll事件，可以实现一些效果，比如标题栏随着页面滚动固定在页面顶部，或者网站滚动时加载更多数据等。

element.addEventListener('scroll', function(event) {
  // Do something when the element is scrolled
});

mousewheel 事件

mousewheel事件在用户使用鼠标滚轮时触发。它可以用于监测用户对页面的滚动行为，并对页面进行控制。根据滚轮滚动的方向，可以让页面向上或向下滚动一定的距离。

element.addEventListener('mousewheel', function(event) {
  if (event.wheelDelta > 0) {
    // Scroll up
  } else {
    // Scroll down
  }
});

touchmove 事件

touchmove事件在用户使用手指在触摸屏上滑动时触发。它可以用于监测用户滑动的手势，比如上下滑动、左右滑动，从而实现一些特效或功能。

element.addEventListener('touchmove', function(event) {
  var touch = event.touches[0];
  var startX = touch.pageX;
  var startY = touch.pageY;
  // Do something when the element is touched and moved
});

window.scrollY属性

window.scrollY属性返回当前页面垂直方向已滚动的像素值。通过监听scroll事件，可以实时获取用户滚动的距离，并根据距离改变页面中的元素的位置或样式。

window.addEventListener('scroll', function(event) {
  var scrollTop = window.scrollY;
  // Do something when window is scrolled
});

参考资料

• MDN Web Docs
• W3Schools