原生JS关于滚动条的常用属性

1、onscroll
作用：当绑定元素发生滚动时执行
用法:

//用法一
<div onscroll="myFunction()">
//用法二
document.querySelector('#scr').onscroll=function () {
    xxx
  }

2、scroll、scrollTo
作用：滚动条滚动到指定位置

//用法一
  document.documentElement.scroll(0,2000) || window.pageYOffset.scroll(0,2000) || document.body.scroll(0,2000)
  
document.documentElement.scrollTo(0,2000) || window.pageYOffset.scrollTo(0,2000) ||document.body.scrollTo(0,2000)
**注意:**这里考虑兼容性需要写三个

//用法二
window.scrollTo(0,500)
window.scroll(0,500)

3、scrollTop
作用：Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。
一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

//获取top值
  window.onload = function () {
      document.body.onscroll = function () {
        //滚动对象是窗口时
        let height = document.documentElement.scrollTop|| window.pageYOffset.scrollTop  || document.body.scrollTop
      }
    }

注意：
如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。
设置scrollTop的值小于0，scrollTop 被设为0
如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。

4、clientHeight

这个属性是只读属性，对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算.

备注:
此属性会将获取的值四舍五入取整数。 如果你需要小数结果, 请使用 element.getBoundingClientRect().

备注：
上面的有问题 因为使用element.getBoundingClientRect()只能获取元素的width / height，但是这个值是 offsetWidth / offsetHeight ，包括边框的长度，所以不能获取clientWidth / clientHeight

5、offsetHeight
包括元素的 CSS height + CSS padding +边框+ 水平滚动条高度 (如果存在)
，不包含:before或:after等伪类元素的高度。

如果元素被隐藏（例如 元素或者元素的祖先之一的元素的style.display被设置为none），则返回0