标签：实现 some java style 前端开发 inner 判断 网页 功能
移动端触底加载时前端开发过程中常用功能，主要是通过三个值的大小来进行判断；
首先介绍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)‘; } }
标签：实现 some java style 前端开发 inner 判断 网页 功能
原文地址：https://www.cnblogs.com/web-wjg/p/8761360.html
