分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

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

发布时间:2023-09-06 01:48责任编辑:赖小花关键词: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)‘; ??} ???????????????}

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

原文地址:https://www.cnblogs.com/web-wjg/p/8761360.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved