實現原理
想要實現這個功能，就要知道具體的實現原理。下面直入主題。
我們通過瀏覽器在瀏覽一個網頁時候是這個樣子的，如圖所示
頁面的長寬，以及各dom的座標都是靜止的，動的是顯示窗口座標而已。所以明白了這個，那麼判斷一個dom元素是否可見時，就十分簡單了。
我們需要知道三個座標就可知道當前dom是否在可見區域內，分別是
1. 顯示窗口的頂部座標
2. 顯示窗口的底部座標
3. dom元素的中心座標
其判斷規則就是，當dom元素的中心座標的X及Y座標均小於顯示窗口的頂部，且大於顯示窗口的底部座標時，那麼就可以判斷該座標在可見區域。
OK，那麼接下來就是要知道這三個座標怎麼計算了。
首先是窗口的頂部座標，頂部座標就是頁面的滾動條滾動的距離。
其次是底部座標，底部座標就是滾動條的距離加上當前可視窗口的高度。
最後dom元素的中心距離，就是這個dom元素到最頂端的高度加上自身高度的一般。
原理就是那麼的簡單有木有。
具體實現
明白了原理，具體實現起來就很簡單啦。下面直接貼上一個簡單的dom代碼做下示例，在實際的生產中還是要優化的，比如初次的首屏顯示等等，這裏就不贅述了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.box {
width: 100%;
height: 200px;
background: #ff0000;
margin-bottom: 10px;
text-align: center;
color: #fff;
line-height: 200px;
font-family: microsoft yahei;
font-size: 40px;
}
.animate{
animation: showText 1s;
}
@keyframes showText
{
from {
font-size: 20px;
}
to {
font-size: 40px;
}
}
</style>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
<script type="text/javascript">
var box = document.getElementsByClassName('box');
document.addEventListener('scroll',function(){
//滾動條高度+視窗高度 = 可見區域底部高度
var visibleBottom = window.scrollY + document.documentElement.clientHeight;
//可見區域頂部高度
var visibleTop = window.scrollY;
for (var i = 0; i < box.length; i++) {
var centerY = box[i].offsetTop+(box[i].offsetHeight/2);
if(centerY>visibleTop&¢erY<visibleBottom){
box[i].innerHTML = '區域可見'
box[i].setAttribute("class",'box animate')
console.log('第'+i+'個區域可見');
}else{
box[i].innerHTML = '';
box[i].setAttribute("class",'box')
console.log('第'+i+'個區域不可見');
}
}
})
</script>
</html>