如何判斷元素是否在當前文檔顯示區內？
阿新 • • 發佈：2017-07-31
tle order bsp 保存圖片 .cn 表示 了解 size 打開
首先了解一下背景知識
scrollTop- scrollTop，scrollLeft 元素滾動的位移
- 一般獲取頁面滾動距離用 document.body.scrollTop
- offsetTop，offsetLeft元素的相對於文檔或是父元素的位移
- 是元素的border離父元素頂部的距離，故即便是margin撐開的距離，也算作offsetTop值
- offsetParent是元素參考位移的父元素
- offsetParent 即為最近的、有定位的、父元素
- 父元素定位全沒有，offsetParent即為<body>
- <body>的offsetParent是null
- 獲取某元素距body頂端的距離，代碼如下
function getHeight(e){ var h = 0; var obj = e; while(obj){ h += obj.offsetTop; // 不斷累加e元素和其每個父元素的offsetTop obj = obj.offsetParent; } return h; }innerHeight、outerHeight
- window.innerHeight、innerWidth
- 當前視圖窗口的大小
- 打開控制臺、屏幕縮放都會導致窗口大小變化
- 相關事件window.onresize
- document.documentElement.clientHeight、clientWidth與之一致，都是表示可見區域寬高
- window.outerHeight、outerWidth
- 當前屏幕的大小
- 電腦多大就是多大，不會改變的
判斷元素是否在視圖窗口之內
如圖所示，頁面滾動的距離 scroll 在 [ offset - h1， offset + h2 ] 之間即算做在視圖內
functionifInWindow (element) { var s = document.body.scrollTop; var h1 = window.innerHeight; var off = getHeight(element); var h2 = element.clientHeight; if(s > off - h1 && s < off + h2){ return true; } return false; } function getHeight(e){ var h = 0; var obj = e; while(obj){ h += obj.offsetTop; // 不斷累加e元素和其每個父元素的offsetTop obj = obj.offsetParent; } return h; }
該功能可用於圖片懶加載，圖片懶加載的思路：在img標簽上用data-src的自定義屬性來保存圖片地址，判斷圖片是否在可見區域內，在可見區域內則設置src，
如何判斷元素是否在當前文檔顯示區內？