获取窗口属性

 

常识：

屏幕滚动的高度为：滚动条滚动距离 + 首屏高度

 

滚动条滚动距离：scrollTop

以下2个都是求滚动条滚动距离，在IE浏览器中，由于兼容性问题，一个如果有值，那么另一个一定为0，

所以兼容写法： document.body.scrollTop + document.documentElement.scrollTop

1、document.body.scrollTop

2、document.documentElement.scrollTop

 

可视区窗口的宽度

1、 IE8 及以下 不兼容

window.innerWidth

window.innerHeight

2、 标准模式下任意模式都兼容

document.documentElement.clientWidth

document.documentElement.clientHeight

3、适用于怪异模式下的浏览器 （浏览器选渲染不是正常的渲染，而是回退到历史版本，兼容之前的语法）

document.body.clientWidth

document.body.clientHeight   

封装 获取可视区窗口

function getViewportOffset() {
    if (window.innerWidth) {
        return {
            w: window.innerWidth,
            h: window.innerHeight
        }
    } else {
        // 标准模式
        if (document.compatMode === 'CSS1Compat') {
            return {
                w: document.documentElement.clientWidth,
                h: document.documentElement.clientHeight
            }
        } else if (document.compatMode === 'BackCompat'){
            // 怪异模式
            return {
                w: document.body.clientWidth,
                h: document.body.clientHeight
            }
        }
    }
}

 

查看元素的几何尺寸：offsetWidth

1、offsetWidth、offsetHeight  获取的是视觉的宽高（就是包含pandding）

<div style="background: brown; height: 100px; width: 100px;padding: 100px;"></div>
<script>
let div = document.getElementsByTagName('div')[0]
console.log(div.offsetWidth, div.offsetHeight)
</script>

   

 

查看元素的位置：offsetLeft、offsetTop

如果该元素的父级元素有定位，返回的是相对于父级定位元素的距离 ( 只要父级有定位，那么输出的一定是相对于父级的距离 )；

如果父级无定位，返回的是相对于文档的距离。

<div style="border: 1px solid #000; 
            height: 200px; width: 200px;
            position: relative; left: 100px; top: 100px;">
    <div style="background: brown; 
                width: 50px; height: 50px; 
                position: absolute; margin-left: 50px; margin-top: 50px;">
    </div>
</div>
<script>
let div = document.getElementsByTagName('div')[1]
console.log(div.offsetLeft, div.offsetTop)
</script>

补充：

margin塌陷： 意思是父子同时设置margin-top时，margin-top大的有效。

解决：给外层父级加上border。

以下margin-top相等了，最后结果叠加了，所以 margin-top 最终为 100px

<div style="width: 200px; height: 200px; margin-left: 50px; margin-top: 100px;">
    <div style="background: darkred; width: 100px; height: 100px; margin-left: 50px; margin-top: 100px;"></div>
</div>

offsetLeft : 108 原因：body 里边默认有一个8px的宽度

offsetTop : 100 原因：margin塌陷的时候，已经把8px包含进去了。

<script>
    let div = document.getElementsByTagName('div')[1]
    console.log(div.offsetLeft, div.offsetTop)
</script>

 

滚动条滚动

window.scroll( x, y ) 、window.scrollTo( x, y )   让滚动条滚动到xxx位置 （不可叠加）

window.scrollTo(0, 200)

window.scrollBy( x, y )  让滚动条移动至xxx位置 （可叠加）

window.scrollBy(x, y)

 

小例子：点击按钮滚动条移动

let flag = true
let timer = null
div.onclick = function () {
    if (flag) {
        timer = setInterval(() => {
            window.scrollBy(0, 10)
        }, 100)
        flag = false
    }
}
div.onclick = function () {
    clearTimeout(timer)
    flag = true
}