前言
刷網頁的時候，有時會遇到這樣一個情景，當某個dom元素滾到可見區域時，它就會展現顯示動畫，十分有趣。那么這是如何實現的呢？
實現原理
想要實現這個功能，就要知道具體的實現原理。下面直入主題。
我們通過瀏覽器在瀏覽一個網頁時候是這個樣子的，如圖所示
頁面的長寬，以及各dom的坐標都是靜止的，動的是顯示窗口坐標而已。所以明白了這個，那么判斷一個dom元素是否可見時，就十分簡單了。
我們需要知道三個坐標就可知道當前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>效果圖
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
