DOM 滚动条,窗口尺寸

2020-01-19  本文已影响0人  ticktackkk

window.pageXOffset 求滚动条横向的距离(ie9以下不兼容)
window.pageYOffset 求滚动条垂直的距离(ie9以下不兼容)
document.body.scrollLeft
document.body.scrollTop
document.documentElement.scrollLeft
document.documentElement.scrollTop
封装一个兼容的返回滚动条距离方法

function getScroll() {
            if (window.pageXOffset) {
                return {
                    x: window.pageXOffset,
                    y: window.pageYOffset
                }
            } else {
                return{
                    x:document.documentElement.scrollLeft()+document.body.scrollLeft,
                    y:document.documentElement.scrollTop()+document.body.scrollTop
                }

            }
        }

查看视口的尺寸
window.ineerWidth当前页面的宽(ie9以下不兼容)
window.innerHeight 当前页面的高度(ie9以下不兼容)
标准模式 document.documentElement.clientWidth
标准模式 document.documentElement.clientHeight
不标准模式下(怪异模式)document.body.clientWidth
不标准模式下(怪异模式)document.body.clientHeight
封装一个查看视口兼容性的方法

function getViewpostOffest() {
            if (window.innerWidth) {
                return {
                    w: window.innerWidth,
                    h: window.innerHeight
                }
            } else {
                if (document.compatMode === 'BackCompat') {
                    return {
                        w: document.body.clientWidth,
                        h: document.body.clientHeight
                    }
                } else {
                    return {
                        w: document.documentElement.clientWidth,
                        h: document.documentElement.clientHeight
                    }
                }
            }
        }
上一篇下一篇

猜你喜欢

热点阅读