欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS判斷元素是否在可視區(qū)域技巧詳解

 更新時間：2022年12月20日 11:03:17   作者：愛劃水de鯨魚哥  
這篇文章主要為大家介紹了JS判斷元素是否在可視區(qū)域技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

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

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

實現方式

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

offsetTop、scrollTop

offsetTop，元素的上外邊框至包含元素的上內邊框之間的像素距離，其他offset屬性如下圖所示：

下面再來了解下clientWidth、clientHeight：

  • clientWidth：元素內容區(qū)寬度加上左右內邊距寬度，即clientWidth = content + padding
  • clientHeight：元素內容區(qū)高度加上上下內邊距高度，即clientHeight = content + padding

這里可以看到client元素都不包括外邊距

最后，關于scroll系列的屬性如下：

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

注意

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

下面再看看如何實現判斷：

公式如下：

el.offsetTop - document.documentElement.scrollTop <= viewPortHeight

代碼實現：

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 &lt;= 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
// }

屬性對應的關系圖如下所示：

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

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

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

實現代碼如下：

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

以上就是JS判斷元素是否在可視區(qū)域技巧詳解的詳細內容，更多關于JS判斷元素可視區(qū)域的資料請關注腳本之家其它相關文章！

相關文章

最新評論