scroll系列

scroll与 client 的区别

scrollWidth/scrollHeight 宽高度 包含了padding 值 不包含 marging和border 值

client 元素被 定义的宽高度
scroll元素自身实际的宽高度不含边框 返回数值不带单位

html代码

 <div>1.JavaScript基础从变量的定义与使用、流程控制语句、数组、函数、构造函数、内置对象以及对象等 2.web API 讲解如何获取DOM元素，如何操作DOM 元素，BOM操作 移动端制作网页特效 3. 后面还会有js高级，ES6类面向对象语法，面向对象案例，原型和原型链等等。 4. 还有会jquery 综合 + echarts数据可视化</div>

css样式

div{width:200px;height:200px;border:solid 5px #f06;overflow:scroll;padding:20px;}

js代码测试

var div = document.querySelector('div')
        console.log(div.scrollWidth); //240
        console.log(div.scrollHeight); //380
        console.log(div.clientWidth); //240
        console.log(div.clientHeight); //240
    

scroll 滚动事件当我们滚动条发生变化 会触发的事件

div.addEventListener('scroll', function() {
//上面被卷的高度
  console.log(div.scrollTop); //87
//侧面被卷的高度
  console.log(div.scrollLeft);//0
 })