前言

在日常開發(fā)中，我們經(jīng)常需要判斷目標(biāo)元素是否在視窗之內(nèi)或者和視窗的距離小于一個值（例如 100 px），從而實現(xiàn)一些常用的功能，例如：

• 圖片的懶加載
• 列表的無限滾動
• 計算廣告元素的曝光情況
• 可點(diǎn)擊鏈接的預(yù)加載

實現(xiàn)方式

判斷一個元素是否在可視區(qū)域，我們常用的有offsetTop、scrollTop和getBoundingClientRect

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元素都不包括外邊距

最后，關(guān)于scroll系列的屬性如下：

• scrollWidth 和 scrollHeight 主要用于確定元素內(nèi)容的實際大小
• scrollLeft 和 scrollTop 屬性既可以確定元素當(dāng)前滾動的狀態(tài)，也可以設(shè)置元素的滾動位置
• • 垂直滾動 scrollTop > 0* 水平滾動 scrollLeft > 0
• 將元素的 scrollLeft 和 scrollTop 設(shè)置為 0，可以重置元素的滾動位置

注意

• 上述屬性都是只讀的，每次訪問都要重新開始

下面再看看如何實現(xiàn)判斷：

公式如下：

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.offsetTopconst scrollTop = document.documentElement.scrollTopconst top = offsetTop - scrollTopreturn top <= viewPortHeight
} 

getBoundingClientRect

返回值是一個 DOMRect對象，擁有left, 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
// } 

屬性對應(yīng)的關(guān)系圖如下所示：

當(dāng)頁面發(fā)生滾動的時候，top與left屬性值都會隨之改變

如果一個元素在視窗之內(nèi)的話，那么它一定滿足下面四個條件：

• top 大于等于 0
• left 大于等于 0
• bottom 小于等于視窗高度
• right 小于等于視窗寬度

實現(xiàn)代碼如下：

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);
} 

最后

整理了一套《前端大廠面試寶典》，包含了HTML、CSS、JavaScript、HTTP、TCP協(xié)議、瀏覽器、VUE、React、數(shù)據(jù)結(jié)構(gòu)和算法，一共201道面試題，并對每個問題作出了回答和解析。

有需要的小伙伴，可以點(diǎn)擊文末卡片領(lǐng)取這份文檔，無償分享

部分文檔展示：

文章篇幅有限，后面的內(nèi)容就不一一展示了

有需要的小伙伴，可以點(diǎn)下方卡片免費(fèi)領(lǐng)取