js滚动事件实现滚动触底加载

Posted 2020-10-30 web_study

移动端触底加载时前端开发过程中常用功能，主要是通过三个值的大小来进行判断；

首先介绍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)‘;
   }
                
}