offset client scroll的作用及区别、浏览器事件

一、offset client scroll的作用及区别

1.offset

• offsetWith offsetHeight —>元素可见框的大小 content padding border
• offsetTop offsetLeft -->获取元素相对于开启类定位的祖先元素的位置 没有祖先元素开启定位就相对于body

2.client

• clientWidth clientHeight -->获取元素的大小 content padding
• clientTop clientLeft：返回元素border-top border-left

3.scroll

• scrollTop scrollLeft -->获取元素滚动距离

• document.documentElement.scrollTop
• document.body.scrollTop
• window.pageXoffset window.pageYoffset 获取页面滚动的距离

二、浏览器事件

1.window.onload 等所有的资源加载完

• DOMContentLoaded 等DOM 加载完，不等其他资源

2. window.onresize 当窗口尺寸变化的时候

3. window.onscroll 滚动事件

4.window.onoffline 网络断开事件

• window.addEventListener(‘offline’,fun)
• 一般会在网络断开时跳转到一个缓存页面，给用户提示

5.window.ononline 网络恢复

例：

        window.addEventListener('offline', fun)
        window.addEventListener('online', fun2)

        function fun() {
            console.log('网路断开了')
        }
        function fun2() {
            console.log('网路恢复了')
        }

6.window.onhashchange 当地址栏中的hash值发生变化时触发的事件

例：

        window.addEventListener('hashchange', function () {
            console.log('hash变换了')
        })