目录

对于大多数网站来说,在编写前端的时候操作滚动条应该是少不了的。现在的很多网站都有一键返回顶部的功能,这就需要涉及到滚动条的操作,还有很多手机 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 事件会在滚动条位置发生改变时触发。无论是鼠标滚动还是拖动滚动条又或是滑动,只要滚动条的位置发生改变就会触发。

控制滚动条

scrollTopscrollLeft 属性:

scrollTopscrollLeft 也是可以直接赋值来设置滚动条位置的,下面给 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() 方法:

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

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

document.documentElement.scrollTo(0, 100);

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

scrollTo 方法还可以传入对象,如下:

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

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

scrollBy() 方法:

scrollByscrollTo 差不多,也是传入横向滚动条和纵向滚动条的位置来设置滚动条,如下:

document.documentElement.scrollBy(0, 300);

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

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

scrollIntoView() 方法

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

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

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

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

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

下面是对象说明:

属性说明
behavior定义动画过渡效果, autosmooth 之一。默认为 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('到底了');
  }
});

相关文章:

版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/884/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
最后编辑:2020年09月04日 ©著作权归作者所有

发表评论

正在加载 Emoji