h5监听滚动条距离顶部和底部的距离

HTML5中的滚动事件可以用来监听滚动条距离页面顶部或底部的距离。主要涉及两个常用的滚动事件：`onscroll` 和 `scroll`。

1. 使用`onscroll`事件：

window.onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动条位置
  console.log('滚动到顶部的距离', -scrollTop); // 正数表示离顶部还有距离，负数表示已经到底部
};

这里需要注意的是，`document.documentElement.scrollTop`通常用于跨浏览器兼容性更好的情况，如果在某些浏览器下返回0，可以尝试使用`document.body.scrollTop`。

2. `scroll`事件则可以绑在元素上，比如你想监听某个滚动区域（如`.scroll-container`）：

var scrollContainer = document.querySelector('.scroll-container');
scrollContainer.addEventListener('scroll', function() {
  var scrollPosition = this.scrollHeight - this.scrollTop - this.clientHeight; // 当前元素滚动距离
  if (scrollPosition === 0) {
    console.log('已到底部');
  } else if (scrollPosition < this.clientHeight) {
    console.log('还在顶部');
  } else {
    console.log('滚动到了中间');
  }
});