2018-05-02 scroll client offset

滚动条是内嵌的

1.scrollWidth/scrollHeight

有滚动条：scrollWidth，scrollHeight=里内容+内容边框2+内边距（有滚动条 padding-bottom消失了）
兼容性可能有些浏览器没有考虑边框大小
没有滚动条：scrollWidth，scrollHeight=里内容+内边距2

---

scrollLeft //每个浏览器计算方法不一样 滚动的长度
scrollTop

---

2.offsetWidth/offsetHeight

有滚动条：offsetWidth，offsetHeight=外内容+外内容边框2+外内边距2
没有滚动条：offsetWidth,offsetHeight=外内容+外内容边框2+外内边距2
有就是有没有滚动条都一样都是自身宽高

---

offsetLeft 对象的左边框 //left+margin
offsetTop 对象的上边框 //相对于父元素的偏移量，margin left top都能影响到 系统默认的margin，padding也能影响到

---

3.clientWidth/clientHeight

有滚动条：clientWidth，clientHeight=内容+内边距2（有文字就知道两个内边距都有）-scrollbarWidth/scrollbarHeight(默认17)
没有滚动条：clientWidth,clientHeight=外内容（height/width）+外内边距2（padding）
有就是有没有滚动条都一样都是自身宽高

---

clientLeft 对象的左边框
clientTop 对象的上边框

---

---

obj.style.width/obj.style.height/obj.style.top/obj.style.left
必须是有内联样式，没有值都没有

---

    
    
    


    

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo at eos sapiente optio eligendi perferendis. Provident nam quo quas impedit iste, corrupti dolorem incidunt nisi. Delectus dolore voluptates, mollitia quibusdam?
        

            
        
    
        scroll