美文网首页
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