JavaScript 窗口操作

佚名 6年前 (2019-04-26) 随笔 1294人围观抢沙发百度已收录

滚动条滚动距离

window.pageXOffset/pageYOffset; ie8及ie8以下不兼容

ie8及ie8以下使用

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

document.body.scrollLeft/Top

document.documentElement.scrollLeft/Top 由于兼容性混乱，一个能用另一个一定是0 所以相加使用。 document.body.scrollLeft+document.documentElement.scrollLeft

        //返回滚动条滚动距离
        function getScrollOffset() {
            if (window.pageXOffset) {
                //((return 大括号必须跟在后面  不能换行  否则返回undefined
                return {
                    x: window.pageXOffset,
                    y: window.pageYOffset
                }
            } else {
                return {
                    x: document.body.scrollLeft + document.documentElement.scrollLeft,
                    y: document.body.scrollTop + document.documentElement.scrollTop
                }
            }
        }

可视区域窗口尺寸

即html文档可以看见的区域 ie8/ie8以下不兼容 window.innerWidth/innerHeight 标准模式：<!DOCTYPE html> 怪异模式：<!DOCTYPE html>删除向后兼容 ie8及ie8以下标准模式下 //document.documentElement.clientWidth/clientHeight;
怪异模式下 //document.body.clientWidth/clientHeight; 查看浏览器模式 document.compatMode

        //返回可视区域尺寸
        function getViewportOffset() {
            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
                    }
                }
            }
        }

查看元素的几何尺寸

1、div.getBoundingClientRect(); //返回结果静态的，不是实时的。返回一个包含left.top.right.bottom,left.top代表左上角的x.y坐标，right.bottom代表右下角的x.y坐标 2、对于无定位的父级，返回相对文档的坐标，对于有定位的父级，返回相对于最近的有定位的父级的坐标位置忽略自身定位，相当于父级的位置 offsetLeft/offsetTop 3、返回最近有无定位的父级 offsetParent