screen/client/offset/scroll/inner/avail的概念

screen/client/offset/scroll/inner/avail的概念

名词解释

• screen： 屏幕。获取有关用户显示器的各种信息。
• client： 使用区、客户区。指的是客户区，是指浏览器区域。
• offset： 偏移。指的是目标甲相对目标乙的距离。
• scroll： 指包含滚动条的属性。
• inner： 指内部部分，不包含滚动条。
• avail： 可用区域，不包含滚动条。

---

window，浏览器宽高信息

//浏览器内容宽 + 滚动条宽
window.innerWidth；

//浏览器内容高 + 滚动条高
window.innerHeight;

//浏览器内容高 + 滚动条高 + 工具栏高 + 浏览器边框（QQ截图时可见边框）
window.outerHeight；

//浏览器内容宽 + 滚动条 + 浏览器边框
window.outerHeight；

window，浏览器偏移信息

//浏览器边框相对于显示器的X偏移量
//方便理解：类似左外边框的宽度。
window.screenLeft;  //兼容：ie6/7/8/9/10、chrome
window.screenX;     //兼容：ie9/10、chrome、firefox

//浏览器边框相对于显示器的Y偏移量
window.screenTop;
window.screenY;

window,浏览器滚动条滚动了的距离

//浏览器滚动条往左滚动了的偏移距离
window.pageXOffset;
window.scrollX;

//浏览器滚动条往下滚动了的偏移距离
window.pageYOffset;
window.scrollY;

screen, 显示器属性

//显示器宽度，像素单位
screen.width;

//显示器高度
screen.height;

//显示器可用宽度，一般与屏幕宽度一致
screen.availWidth

//显示器可用高度
screen.availHeight

element, 元素偏移属性

//content + padding，元素宽高
elment.clientWidth;

element.clientHeight;

//border 等于元素边框大小
element.clientLeft;

//上边框距离
element.clientTop;

//元素大小 content + padding + border [+ 滚动条]
element.offsetWidth;

element.offsetHeight;

// content + padding - 滚动条
element.scrollWidth;
element.scrollHeight;

//元素相对于已定位祖先元素的偏移距离，即设置了position属性的祖先元素。
element.offsetLeft;

element.offsetTop;

//获得水平、垂直滚动条的距离
element.scrollLeft;
element.scrollTop;

转载于:https://my.oschina.net/huaeryushaonian/blog/796432