移动端触底加载时前端开发过程中常用功能,主要是通过三个值的大小来进行判断;
首先介绍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滚动事件实现滚动触底加载
原文地址:https://www.cnblogs.com/web-wjg/p/8761360.html