移動端觸底加載時前端開發過程中常用功能，主要是通過三個值的大小來進行判斷；

首先介紹jquery的寫法，代碼如下：

$(window).scroll(function(){
   var windowH=$(window).height();//設備可見區域高度
   var documentH=$(document).height();//整個網頁的高度（包括未顯示的部分）
    var scrollH=$(window).scrollTop();//滾動條滾動上去的高度
     //或者  scrollH = $(document).scrollTop();   
    if(windowH+scrollH>=documentH){
       
 
//do something
   }
}   

再來接受原生javaScript的寫法，代碼如下：

window.onscroll=function(){
var windowH = document.documentElement.clientHeight;//網頁可視區域高度
//windowH = window.innerHeight;
//windowH=window.scrollY;
var documentH= document.documentElement.offsetHeight;
//documentH=document.documentElement.offsetHeight;
var
 
 scrollH= document.documentElement.scrollTop;
if(windowH +scrollH>=documentH){
//do something
}
}

附：pc滾動時判斷元素是否在當前可視窗口內，然後進行相關的動畫或者其他操作，代碼如下；

<style type="text/css">
    ul li {
    list-style: none;
    height: 400px;
    background-color: #E5E5E5;
    font-size: 40px;
    }
            
    ul li:nth-of-type(2n+1) 
 
{
    background: #ff6700;
    }
</style>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>41</li>
<li>5</li>
<li class="six">6</li>
<li>7</li>
<li>8</li>
</ul>

window.onscroll=function(){
//document.querySelector(‘.six‘).offsetTop，這個值的獲取是關鍵            
    if(document.documentElement.scrollTop+ document.documentElement.clientHeight>=document.querySelector(‘.six‘).offsetTop+300){
        document.querySelector(‘.six‘).style.transition=‘.4s‘
         document.querySelector(‘.six‘).style.transform=‘rotate(720deg)‘;
   }
                
}

js滾動事件實現滾動觸底加載