美文网首页
DOM 滚动条,窗口尺寸

DOM 滚动条,窗口尺寸

作者: ticktackkk | 来源:发表于2020-01-19 03:11 被阅读0次

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
                    }
                }
            }
        }

相关文章

网友评论

      本文标题:DOM 滚动条,窗口尺寸

      本文链接:https://www.haomeiwen.com/subject/jrnlzctx.html