jsスクロールイベントスクロールアンダーロードを実現

移動端触底負荷時のフロントエンド開発過程でよく使われる機能は、主に3つの値の大きさで判断される.
まず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.οnscrοll=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>1li>
<li>2li>
<li>3li>
<li>4li>
<li>41li>
<li>5li>
<li class="six">6li>
<li>7li>
<li>8li>
ul>

window.οnscrοll=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)';
   }
                
}

 
転載先:https://www.cnblogs.com/web-wjg/p/8761360.html