用途
可視區(qū)域即我們?yōu)g覽網(wǎng)頁的設備肉眼可見的區(qū)域，如下圖
在日常開發(fā)中鲤嫡，我們經(jīng)常需要判斷目標元素是否在視窗之內(nèi)或者和視窗的距離小于一個值（例如 100 px），從而實現(xiàn)一些常用的功能绑莺，例如：
圖片的懶加載
列表的無限滾動
計算廣告元素的曝光情況
可點擊鏈接的預加載
實現(xiàn)方式
判斷一個元素是否在可視區(qū)域暖眼，我們常用的有三種辦法：
1、offsetTop纺裁、scrollTop
2诫肠、getBoundingClientRect
3、Intersection Observer
offsetTop欺缘、scrollTop
offsetTop栋豫，元素的上外邊框至包含元素的上內(nèi)邊框之間的像素距離，其他offset屬性如下圖所示：
下面再來了解下clientWidth谚殊、clientHeight：
clientWidth：元素內(nèi)容區(qū)寬度加上左右內(nèi)邊距寬度丧鸯，即clientWidth = content + padding
clientHeight：元素內(nèi)容區(qū)高度加上上下內(nèi)邊距高度，即clientHeight = content + padding
這里可以看到client元素都不包括外邊距
最后络凿，關于scroll系列的屬性如下：
scrollWidth 和 scrollHeight 主要用于確定元素內(nèi)容的實際大小
scrollLeft 和 scrollTop 屬性既可以確定元素當前滾動的狀態(tài)骡送，也可以設置元素的滾動位置
垂直滾動 scrollTop > 0
水平滾動 scrollLeft > 0
將元素的 scrollLeft 和 scrollTop 設置為 0昂羡，可以重置元素的滾動位置
注意：上述屬性都是只讀的，每次訪問都要重新開始
公式如下：
el.offsetTop - document.documentElement.scrollTop <= viewPortHeight
代碼實現(xiàn)：
function isInViewPortOfOne (el) {
// viewPortHeight 兼容所有瀏覽器寫法
const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
const offsetTop = el.offsetTop
const scrollTop = document.documentElement.scrollTop
const top = offsetTop - scrollTop
return top <= viewPortHeight
}
getBoundingClientRect
返回值是一個 DOMRect對象摔踱，擁有l(wèi)eft, top, right, bottom, x, y, width, 和 height屬性
const target = document.querySelector('.target');
const clientRect = target.getBoundingClientRect();
console.log(clientRect);
// {
// bottom: 556.21875,
// height: 393.59375,
// left: 333,
// right: 1017,
// top: 162.625,
// width: 684
// }
屬性對應的關系圖如下所示：
當頁面發(fā)生滾動的時候虐先，top與left屬性值都會隨之改變
如果一個元素在視窗之內(nèi)的話，那么它一定滿足下面四個條件：
top 大于等于 0
left 大于等于 0
bottom 小于等于視窗高度
right 小于等于視窗寬度
Intersection Observer
Intersection Observer 即重疊觀察者派敷，從這個命名就可以看出它用于判斷兩個元素是否重疊蛹批，因為不用進行事件的監(jiān)聽，性能方面相比getBoundingClientRect會好很多
使用步驟主要分為兩步：創(chuàng)建觀察者和傳入被觀察者
創(chuàng)建觀察者
const options = {
// 表示重疊面積占被觀察者的比例篮愉，從 0 - 1 取值腐芍，
// 1 表示完全被包含
threshold: 1.0,
root:document.querySelector('#scrollArea') // 必須是目標元素的父級元素
};
const callback = (entries, observer) => { ....}
const observer = new IntersectionObserver(callback, options);
通過new IntersectionObserver創(chuàng)建了觀察者 observer，傳入的參數(shù) callback 在重疊比例超過 threshold 時會被執(zhí)行`
關于callback回調函數(shù)常用屬性如下：
// 上段代碼中被省略的 callback
const callback = function(entries, observer) {
entries.forEach(entry => {
entry.time; // 觸發(fā)的時間
entry.rootBounds; // 根元素的位置矩形试躏，這種情況下為視窗位置
entry.boundingClientRect; // 被觀察者的位置舉行
entry.intersectionRect; // 重疊區(qū)域的位置矩形
entry.intersectionRatio; // 重疊區(qū)域占被觀察者面積的比例（被觀察者不是矩形時也按照矩形計算）
entry.target; // 被觀察者
});
};
傳入被觀察者
通過 observer.observe(target) 這一行代碼即可簡單的注冊被觀察者
const target = document.querySelector('.target');
observer.observe(target);
案例分析
實現(xiàn)：創(chuàng)建了一個十萬個節(jié)點的長列表猪勇，當節(jié)點滾入到視窗中時，背景就會從紅色變?yōu)辄S色
Html結構如下：
<div class="container"></div>
css樣式如下：
.container {
display: flex;
flex-wrap: wrap;
}
.target {
margin: 5px;
width: 20px;
height: 20px;
background: red;
}
往container插入1000個元素
const $container = $(".container");
// 插入 100000 個 <div class="target"></div>
function createTargets() {
const htmlString = new Array(100000)
.fill('<div class="target"></div>')
.join("");
$container.html(htmlString);
}
這里颠蕴，首先使用getBoundingClientRect方法進行判斷元素是否在可視區(qū)域
function isInViewPort(element) {
const viewWidth = window.innerWidth || document.documentElement.clientWidth;
const viewHeight =
window.innerHeight || document.documentElement.clientHeight;
const { top, right, bottom, left } = element.getBoundingClientRect();
return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight;
}
然后開始監(jiān)聽scroll事件泣刹，判斷頁面上哪些元素在可視區(qū)域中，如果在可視區(qū)域中則將背景顏色設置為yellow
$(window).on("scroll", () => {
console.log("scroll !");
$targets.each((index, element) => {
if (isInViewPort(element)) {
$(element).css("background-color", "yellow");
}
});
});
通過上述方式犀被，可以看到可視區(qū)域顏色會變成黃色了椅您，但是可以明顯看到有卡頓的現(xiàn)象，原因在于我們綁定了scroll事件寡键，scroll事件伴隨了大量的計算掀泳，會造成資源方面的浪費
下面通過Intersection Observer的形式同樣實現(xiàn)相同的功能
首先創(chuàng)建一個觀察者
const observer = new IntersectionObserver(getYellow, { threshold: 1.0 });
getYellow回調函數(shù)實現(xiàn)對背景顏色改變，如下：
function getYellow(entries, observer) {
entries.forEach(entry => {
$(entry.target).css("background-color", "yellow");
});
}
最后傳入觀察者西轩，即.target元素
$targets.each((index, element) => {
observer.observe(element);
});
可以看到功能同樣完成员舵，并且頁面不會出現(xiàn)卡頓的情況
參考文獻
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API
