基础知识
- 屏幕可视窗口宽高
**js原生**
document.documentElement.clientWidth // 不包含滚动条宽度
document.documentElement.clientHeight
window.innerWidth // 宽度包含滚动条宽度
window.innerHeight
var win_h = window.innerHeight || document.documentElement.clientHeight //兼容写法
**jQuery**
$(window).width()
$(window).height()
屏幕可视窗口宽高
- 整个网页宽高
**js原生**
document.documentElement.scrollWidth
document.documentElement.scrollHeight
**jQuery**
$(document).width()
$(document).height()
整个网页宽高
- 整个个网页的上方或者左边被卷起来的部分
**js原生**
document.documentElement.scrollTop
document.documentElement.scrollLeft
**jQuery**
$(document).scrollTop()
$(document).scrollLeft()
整个个网页的上方或者左边被卷起来的部分
- 元素的尺寸和位置
**js原生**
elem.offsetWidth //包含了左右padding+border;
elem.offsetHeight //包含了上下padding+border;
// 下面的两个和box-sizing 属性有关，当设为border-box时，返回的宽高包含padding和border，默认时，则不包含。
window.getComputedStyle(elem).width // 返回字符串包含单位px
window.getComputedStyle(elem).height // 返回字符串包含单位px
elem.offsetTop // 相对于第一个已定位的父元素的顶部偏移距离
elem.offsetLeft // 相对于第一个已定位的父元素的左边偏移距离
**jQuery**
$node.offset().top // 距离文档顶部的距离
$node.offset().left // 距离文档左边的距离
获取当前页面滚动条纵坐标的位置
var heightTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYoffset;
获取当前页面滚动条纵坐标的位置
**jQuery**
$node.offset().top;
**js原生**
function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标
var t = obj.offsetTop; //获取该元素对应父容器的上边距
var l = obj.offsetLeft; //对应父容器的上边距
//判断是否有父容器，如果存在则累加其边距
while (obj = obj.offsetParent) {
t += obj.offsetTop; //叠加父容器的上边距
l += obj.offsetLeft; //叠加父容器的左边距
}
return {
x:l,
y:t
}
}
var top2 = getPoint(document.getElementsByClassName('btn')[0]);
console.log(top2.y); //2080
监听某个元素是否已经在可视区域
实现思路：获取当前监听元素距离文档的左上角的top距离；根据这个距离和当前可视区域的高度+文档滚动距离进行比较，即scrollTop <= top <= document.documentElement.clientHeight + scrollTop
**jQuery**
$(function(){
var top = $("#btn").offset().top; //距离文档顶部的距离
var windowHeight = document.documentElement.clientHeight; //可视区域的高度
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(top >= scrollTop && top <= windowHeight + scrollTop){
console.log('在可视区域了');
}
});
})
**js原生**
function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标
var t = obj.offsetTop; //获取该元素对应父容器的上边距
var l = obj.offsetLeft; //对应父容器的上边距
//判断是否有父容器，如果存在则累加其边距
while (obj = obj.offsetParent) {
t += obj.offsetTop; //叠加父容器的上边距
l += obj.offsetLeft; //叠加父容器的左边距
}
return {
x:l,
y:t
}
}
window.onload = function(){
var top = getPoint(document.getElementById('btn')).y; //距离文档顶部的距离
var windowHeight = document.documentElement.clientHeight; //可视区域的高度
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(top >= scrollTop && top <= windowHeight + scrollTop){
console.log('在可视区域了');
}
}
}
