最近H5的项目中做了一些页面滚动顶部渐变和定位到对应的tab功能，就需要获取元素在视口里面的位置，滚动的距离等，同时最近rn项目也需要获取元素在视口里面的位置，就一起记录下，元素的含义及对用的参数自取
js 获取参数含义
getBoundingClientRect ( ) 返回值：对象 有6个属性
let elem = document.querySelector('div');
let rect = elem.getBoundingClientRect();
for (var key in rect) {
if(typeof rect[key] !== 'function') {
let para = document.createElement('p');
para.textContent = `${ key } : ${ rect[key] }`;
document.body.appendChild(para);
}
}
// 得到的值 x : 146，y : 50，width : 440，height : 240，top : 50，right : 586，bottom : 290，left : 146
// left（元素左侧相对于可视区左上角的距离）, right（元素右侧相对于可视区左上角的距离）,top（元素上边相对于可视区左上角的距离）
// bottom（元素下边相对于可视区左上角的距离）,width（可视宽度）,height（可视高度）
获取可视区域的宽和高
- window.innerWidth
- indow.innerHeight
- document.documentElement.clientWidth
- document.documentElement.clientHeight
获取元素的属性
- ffsetLeft （距离定位父级的距离）
- offsetTop （距离定位父级的距离）
- offsetWidth （可视宽度）
- offsetHeight （可视高度）
- clientLeft （左边框宽度）
- clientTop （上边框宽度）
- clientWidth（width + padding）
- clientHeight（height + padding）
- scrollTop（纵向滚动距离）
- scrollLeft（横向滚动距离）
- scrollWidth（内容宽度）
- scrollHeight（内容高度）
获取屏幕宽和高
- window.screen.width
- window.screen,height
获取文档宽高
- document.body.clientWidth
- document.body.clientHeight
- document.documentElement.scrollWidth
- document.documentElement.scrollHeight
- document.body.scrollWidth（如果内容宽度超过一屏，得到文档宽度；如果内容小于一屏，得到一屏的宽度）
- document.body.scrollHeight （如果内容高度超过一屏，得到文档高度；如果内容小于一屏，得到一屏的高度）
获取滚动条距离
- document.body.scrollTop
- document.body.scrollLeft
- window.scrollY
- window.scrollX
- document.documentElement.scrollTop
- document.documentElement.scrollLeft
- window.pageYOffset
- window.pageXOffset
React Native中测量组件和视口顶部之间的距离方法
measure()测量是根据view标签中的ref属性，使用代码如下
class MyComponent extends React.Component {
state = {
containerHeight: 0
};
handleLayoutChange() {
this.conainerView.measure(
(x, y, width, height, left, top) => {
// with：宽；height：高；left：x轴方向距离左边多少像素；top：y轴方向距离上边多少像素；
this.setState({ containerHeight:height });
}
);
}
render() {
return (
<View
onLayout={event => {
this.handleLayoutChange(event);
}}
ref={view => {
this.conainerView = view;
}}
>
<Child containerHeight={this.state.containerHeight} />
</View>
);
}
}