We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在前端开发的过程中，往往会遇到需要判断一个元素是否在可见视窗内的需求。
其实很简单，就是在window上注册scroll事件，然后获取一个元素的绝对定位（相对于网页左上角的距离）减去滚动条的垂直偏离距离（pageYOffset || scrollY）是不是在可见视窗（viewport）的高度范围内。
window
scroll
我们继续拓展，在这篇文章你将会知道如何获取下面的几个关键值：
width，屏幕的宽度 height，屏幕的高度 availWidth，浏览器最大化的宽度 availHeight，浏览器最大化的高度
screenX，浏览器距离显示器左边界的距离 screenY，浏览器距离显示器顶部的距离 pageYOffset | scrollY，滚动条垂直偏移量 pageXOffset | scrollX，滚动条水平偏移量 innerHeight，浏览器内可视窗口的高度（包括滚动条） innerWidth，浏览器内可视窗口的宽度（包括滚动条） outerHeight，浏览器实际的高度 outerWidth，浏览器实际的宽度
documentElement，返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素） body，返回当前文档中的<body>元素或者<frameset>元素 [documentElement | body].clientHeight，网页在可视窗口内的高度（不包括滚动条） [documentElement | body].clientWidth，网页在可视窗口内的宽度（不包括滚动条） [documentElement | body].scrollTop，网页在垂直方向上的滚动距离（几乎等于window.scrollY） [documentElement | body].scrollLeft，网页在水平方向上的滚动距离（几乎等于window.scrollX） [documentElement | body].scrollHeight，网页在垂直方向上可滚动的距离（相当于网页高度） [documentElement | body].scrollWidth，网页在水平方向上可滚动的距离（相当于网页宽度） compatMode，BackCompat | CSS1Compat，是否是quirks模式或标准模式
clientHeight，表示元素可显示的高度（以像素表示），包含内边距，但不包括水平滚动条、边框和外边距。 clientWidth，表示元素显示的宽度（以像素表示），该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。 clientTop，表示一个元素顶部边框的宽度（以像素表示），不包括顶部外边距或内边距 clientLeft，表示一个元素的左边框的宽度（以像素表示） scrollHeight，元素可垂直滚动内容的高度 scrollWidth，元素可水平滚动内容的宽度 scrollTop，元素已垂直滚动内容的高度 scrollLeft，元素已水平滚动内容的宽度 offsetParent，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素（非static）。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素（标准模式下为 html；quirks 模式下为 body） offsetTop，相对于其 offsetParent 元素的顶部的距离 offsetLeft，相对于其 offsetParent 元素的左边界的距离 offsetHeight，表示一个元素的布局高度，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。 offsetWidth，表示一个元素的布局宽度。 getBoundingClientRect()，返回元素左上角和右下角相对可视窗口的左上角的距离
getBoundingClientRect()的返回值：x、y表示坐标；top、bottom、left、right表示与可视窗口左上角的距离；width、height表示宽高。
记忆小卡片：offsetHeight指的是元素的布局高度（包括边框、内边距，但不包括外边距），clientHeight指的是元素的内部高度（仅包括内边距，但不包括外边距、边框），clientTop指的是上边框的宽度。
BackCompat 对应quirks mode CSS1Compat 对应strict mode
元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;
width则是元素的实际宽度，内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)
document.documentElement
document.body
MDN推荐：
var x = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft; var y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
另一种：
export default function getScrollTop() { return window.pageYOffset || (document.compatMode && document.compatMode != 'BackCompat' && document.documentElement.scrollTop) || (document.body && document.body.scrollTop) }
还有一种：
function getOffSetY() { return document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset; }
浏览器的各种位置值获取 document.compatMode的CSS1compat使用介绍 document.compatMode介绍
The text was updated successfully, but these errors were encountered:
No branches or pull requests
概述
在前端开发的过程中，往往会遇到需要判断一个元素是否在可见视窗内的需求。
其实很简单，就是在
window上注册scroll事件，然后获取一个元素的绝对定位（相对于网页左上角的距离）减去滚动条的垂直偏离距离（pageYOffset || scrollY）是不是在可见视窗（viewport）的高度范围内。我们继续拓展，在这篇文章你将会知道如何获取下面的几个关键值：
罗列相关的Web API
document.compatMode
BackCompat 对应quirks mode
CSS1Compat 对应strict mode
document.documentElement；在Quirks mode中，使用document.body兼容性获取垂直或水平已滚动距离
MDN推荐：
另一种：
还有一种：
参考
浏览器的各种位置值获取
document.compatMode的CSS1compat使用介绍
document.compatMode介绍
The text was updated successfully, but these errors were encountered: