24.元素滚动-scroll系列

目录

1. scrollHeight 和 scrollWidth

2. onscroll 滚动事件

3. scrollTop 

4. offset、client、scroll的区别 

---

1. scrollHeight 和 scrollWidth

不包含元素的边框，是实际的高度和宽度

       var div = document.querySelector('div');

        console.log(div.scrollHeight);

2. onscroll 滚动事件

当我们的滚动条发生变化时触发的事件 onscroll

3. scrollTop 

指的是滚动的内容头部距离盒子的上边框的距离

    div.addEventListener('scroll', function() {

            // scrollTop指的是滚动的内容头部距离盒子的上边框的距离

            console.log(div.scrollTop);

        })

注意：元素被卷去的头部是element.scrollTop,如果是页面被卷去头部则是window.pageYOffse

4. offset、client、scroll的区别