js滚动事件实现滚动触底加载
移动端触底加载时前端开发过程中常用功能,主要是通过三个值的大小来进行判断;
首先介绍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)'; } }
认真是一种态度。。。求知若饥,虚怀若愚