对于大多数网站来说，在编写前端的时候操作滚动条应该是少不了的。现在的很多网站都有一键返回顶部的功能，这就需要涉及到滚动条的操作，还有很多手机 APP 和网站是根据滚动条的位置动态加载数据的，也需要涉及到滚动条的操作。这里简单写一下滚动条的读取和控制，忘记的时候方便查阅。

获取滚动条位置

获取 document 的滚动条顶部到浏览器顶部的高度：

document.documentElement.scrollTop

上面获取的滚动条只包含滚动条顶部到浏览器顶部的高度，不包含滚动条自身的高度。

获取 document 整个滚动条区域的高度：

document.documentElement.scrollHeight

上面获取的是整个滚动条区域的高度，也包括滚动条自身，和 document.documentElement.offsetHeight 获取的 document 高度是一样的。

获取 document 的横向滚动条左侧到浏览器左侧的宽度：

document.documentElement.scrollLeft

上面获取的滚动条宽度只包含滚动条左侧到浏览器左侧的宽度，不包含滚动条本身。

获取 document 的整个横向滚动条的宽度：

document.documentElement.scrollWidth

获取普通元素的滚动条宽高：

//  获取 ul 滚动条顶部到 ul 顶部的高度
document.querySelector('ul').scrollTop
//  获取 ul 整个滚动条的高度
document.querySelector('ul').scrollHeight
//  获取 ul 横向滚动条左侧到 ul 左侧的宽度
document.querySelector('ul').scrollLeft
//  获取 ul 整个横向滚动条的宽度
document.querySelector('ul').scrollWidth

普通元素如果要使用滚动条需要通过 CSS 设置一个高度，也可以是 max-height，然后把 overflow-y 设置为 scroll。如果要使用横向滚动条需要设置宽度，然后把 overflow-x 设置为 scroll，部分元素需要设置强制不换行。

滚动条事件

下面给 document 添加一个 scroll 事件来监听滚动条，然后把滚动条的高度传给 title：

document.addEventListener('scroll', function() {
  document.title = document.documentElement.scrollTop;
});

下面给 ul 添加 scroll 事件来监听 ul 的滚动条，然后把 ul 滚动条的高度传给 title：

document.querySelector('ul').addEventListener('scroll', function(ev) {
  document.title = ev.target.scrollTop;
});

scroll 事件会在滚动条位置发生改变时触发。无论是鼠标滚动还是拖动滚动条又或是滑动，只要滚动条的位置发生改变就会触发。

控制滚动条

scrollTop 和 scrollLeft 属性：

scrollTop 和 scrollLeft 也是可以直接赋值来设置滚动条位置的，下面给 document 添加一个点击事件，点击后设置 scrollTop 为 0，也就是直接返回顶部：

document.addEventListener('click', function() {
  document.documentElement.scrollTop = 0;
});

下面给 document 添加一个点击事件，设置滚动条的高度为整个滚动条区域的高度 - 可视区的高度，也就是跳转到底部：

document.addEventListener('click', function() {
  document.documentElement.scrollTop = document.documentElement.scrollHeight - window.innerHeight;
});

scrollTo() 方法：

除了直接给 scrollTop 或 scrollLeft 赋值外也可以使用 scrollTo() 方法来设置滚动条的位置。

下面设置 document 的滚动条高度：

document.documentElement.scrollTo(0, 100);

第一个参数是横向滚动条，第二个参数是纵向滚动条。

scrollTo 方法还可以传入对象，如下：

document.documentElement.scrollTo({
  top: 200,
  left: 0,
});

注意！IE 系列的浏览器不支持 scrollTo，IE 11 也不支持。

scrollBy() 方法：

scrollBy 和 scrollTo 差不多，也是传入横向滚动条和纵向滚动条的位置来设置滚动条，如下：

document.documentElement.scrollBy(0, 300);

上面设置纵向滚动条高度为 300。

scrollBy 方法也不支持 IE 系列的浏览器。

scrollIntoView() 方法

scrollIntoView 可以指定元素滚动到可视区内，有点类似于链接的锚点跳转。

下面让 footer 元素滚动到可视区内：

document.querySelector('footer').scrollIntoView(true);

scrollIntoView 可以接收一个 Boolean 类型的参数，也可以接收一个对象。

如果 Boolean 类型的参数为 true，元素的顶端将和其所在滚动区的可视区域的顶端对齐，如果为 false，元素的底端将和其所在滚动区的可视区域的底端对齐。

下面是对象说明：

属性说明
behavior定义动画过渡效果， auto 或 smooth 之一。默认为 auto
block定义垂直方向的对齐， start, center, end, 或 nearest 之一。默认为 start
inline定义水平方向的对齐， start, center, end, 或 nearest 之一。默认为 nearest。

上面表格中的说明来源于 MDN 文档。

对象的每个属性都可以省略，下面只传入一个属性：

document.querySelector('footer').scrollIntoView({
  behavior: 'smooth',
});

scrollIntoView 方法 IE 11 是可以支持的，但不会显示动画。

判断是否滚动到底部

现在的很多手机 APP 和网站都是根据滚动条的位置动态加载数据的，当滚动条滚动到底部就会加载数据。

下面监听 document 的滚动条，当滚动条滚动到底部就弹出一个对话框：

document.addEventListener('scroll', function() {
  if (document.documentElement.scrollTop + window.innerHeight >= document.documentElement.scrollHeight) {
    alert('到底了');
  }
});

相关文章：