js滚动事件实现滚动触底加载-白红宇

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

阅读量：4984 次

发布时间：2019-06-12

本文共 1270 字，大约阅读时间需要 4 分钟。

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

首先介绍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滚动时判断元素是否在当前可视窗口内，然后进行相关的动画或者其他操作，代码如下；


     
      1
      2
      3
      4
      41
      5
      6
      7
      8
     
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)';   }                }