javascript 滑动底部加载事件

移动端底部导航栏之css滚动 移动端导航栏滚动之css <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"> * { margin: 0; padding: 0; 阅读详情
// 自定义事件
	function ajax_function() {
	    //alert("自定义事件内容");
	    getMore();
	}

	var timeoutInt;   // 要保证最后要运行一次
	window.onscroll = function () {
	    setTimeout(function () {
	        if (timeoutInt != undefined) {
	            window.clearTimeout(timeoutInt);
	        }
	        timeoutInt = window.setTimeout(function () {
	            //监听事件内容
	            if(getScrollHeight() == getDocumentTop() + getWindowHeight()){
	                //当滚动条到底时,这里是触发内容
	                //异步请求数据,局部刷新dom
	                ajax_function()
	            }
	        }, 105);
	    }, 100);
	}

	//文档高度
	function getDocumentTop() {
	    var scrollTop =  0, bodyScrollTop = 0, documentScrollTop = 0;
	    if (document.body) {
	        bodyScrollTop = document.body.scrollTop;
	    }
	    if (document.documentElement) {
	        documentScrollTop = document.documentElement.scrollTop;
	    }
	    scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
	    console.log("scrollTop:"+scrollTop);
	    return scrollTop;
	}

	//可视窗口高度
	function getWindowHeight() {
	    var windowHeight = 0;
	    if (document.compatMode == "CSS1Compat") {
	        windowHeight = document.documentElement.clientHeight;
	    } else {
	        windowHeight = document.body.clientHeight;
	    }
	    console.log("windowHeight:"+windowHeight);
	    return windowHeight;
	}

	//滚动条滚动高度
	function getScrollHeight() {
	    var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
	    if (document.body) {
	        bodyScrollHeight = document.body.scrollHeight;
	    }
	    if (document.documentElement) {
	        documentScrollHeight = document.documentElement.scrollHeight;
	    }
	    scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
	    console.log("scrollHeight:"+scrollHeight);
	    return scrollHeight;
	}

 

js实现滚轮滑动到底部自动加载(完整版) /let scrollHeight=document.querySelector("JL").scrollHeight //js中使用。// let innerHeight=document.querySelector("JL").clientHeight //js中使用。//let scrollTop=document.querySelector("JL").scrollTop //js中使用。//此时的data传递的就是正常查询需要的参数,以及分页的页码和数量。//判断是否还有数据。 阅读详情

相关推荐

一文读懂无人机AI识别算法,原理、技术、应用

本文详细介绍了无人机识别算法的工作原理、技术优势以及在多个行业的应用前景,展现了其在提升安全监控、资源管理和应急响应中的关键作用。尽管无人机识别算法在多个领域展现出巨大潜力,但仍面临技术挑战,如算法的准确性、数据的实时处理能力以及对复杂环境的适应性。4. 消防与城市管理: 无人机识别算法在消防和城市管理中的应用,为相关部门提供了及时的信息支持,提升了应急处置能力和城市管理水平。1. 公安监控: 无人机识别算法在公安领域的应用,可以实时识别犯罪嫌疑人和违法行为,有效提升城市治安管理的智能化水平。

foiadrone的博客 1847

原生javascript移动端滚动到底部加载更多数据效果代码

CodingNoob 4147

ROS开发者的福音:用Anaconda虚拟环境解决Python包冲突(附完整配置流程)

本文为ROS开发者提供了使用Anaconda虚拟环境解决Python包冲突的完整方案。通过分析冲突根源,详细介绍了Miniconda安装、专用环境创建以及核心桥梁包的配置流程,并阐述了“混合环境运行”与“纯虚拟环境构建”两种实战工作流,帮助开发者实现ROS核心与特定Python库的和谐共存,从而提升开发效率和项目可维护性。

weixin_28835789的博客 338

移动端实现滑动到底部加载下一页

1、用于盛放信息流的容器 <ul> <!-- 底部标志,用于往底部标志之前添加 --> <li id="end-sign"></li> </ur> 2、 JavaScript部分 <script type='text/javascript'> // 默认当前起始页 var page = 1; ...

nhphp的博客 3142

WRF和WPS模型在Ubuntu系统上的安装与常见问题解决指南

本文详细介绍了在Ubuntu系统上安装WRF和WPS模型的完整教程,涵盖系统环境配置、依赖库安装、源代码编译以及常见问题的解决方案。重点解决了WPS编译中intmath.f文件的修改、环境变量设置和编译器兼容性等关键难点,帮助用户高效部署气象研究与预报模型。

weixin_29213525的博客 381

Maxwell中铜导体热损计算的关键步骤与技巧

本文详细介绍了在Maxwell软件中准确计算铜导体热损的关键步骤与实用技巧。重点阐述了如何正确设置涡流场求解器、启用涡流效应、根据工作频率计算并应用肌肤深度以指导网格剖分,以及准确施加激励和定义电流回路。文章还强调了使用温度相关材料属性和进行后处理验证的重要性,旨在帮助工程师获得可靠的热损计算结果,优化产品设计。

weixin_29232121的博客 496

移动端网页滑动到底部触发事件

移动端网页滑动到底部触发事件

徐同保的专栏 6941

RandLA-Net Tensorrt 推理 c++

RandLA-Net 实现 Tensorrt 部署.

J。 1109

解决ios移动端双击页面下移

ios移动端在双击弹出层的时候会出现页面下移,露出底层页面的现象 解决办法: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <...

weixin_30783629的博客 528

【数据集】未来不同情景下预测数据:如人口、土地利用等

未来不同情景下预测数据:如人口、土地利用等

WW、forever的博客 2994

2024年12月数据月报

2024年12月大数据月报,为您准备了阿里、字节、百度等大厂150多篇实践案例

SmartSi 2654

js/jquery控制页面滑动到底部时自动加载事件

页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多  有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志  今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,

yidianbiji的博客 548

基于 YOLOv26 的高速抛物识别系统:微小目标检测

本文提出了一种基于YOLOv26的高速抛物识别系统,专注于微小目标检测。系统采用多模块协同架构,包括视频预处理、YOLOv26检测、目标跟踪和抛物行为分析等模块。关键技术包括YOLOv26s模型检测、DeepSORT目标跟踪和边缘计算部署。通过构建包含多种抛物类型的专业数据集,并应用数据增强技术提升模型性能。系统实现了车辆检测、微小抛物目标识别、抛物轨迹分析和风险等级评估等功能,可实时检测高速公路上的抛物行为并触发告警,为交通管理提供智能化解决方案。

一键难忘的博客 632

(VUE)JS判断滚动条滑动到底部加载更多数据,并防止事件多次触发

首先在mounted中添加滚动条scroll监视事件 mounted() { //监视scroll滚动条 window.addEventListener("scroll", this.isRefresh, true); }, 在isRefresh函数中,当第一次到达底部时我们将isRefreshBool变量变为false(禁止refresh()加载数据函数多次触发),当我们的refresh()函数中请求完成后再将isRefreshBool设为true(允许到达底部执行refr.

weixin_43736435的博客 2872

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

js监听scrolltop_js监听页面的scroll事件,当移到底部时触发事件

//页面拉到底时自动加载更多$(window).scroll(function(event){var wScrollY = window.scrollY; // 当前滚动条位置var wInnerH = window.innerHeight; // 设备窗口的高度(不会变)var bScrollH = document.body.scrollHeight; // 滚动条总高度if (wScroll...

weixin_42723849的博客 206

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

说一下php的自动加载,phpcms实现向下滑动后自动加载效果

本文简单介绍了使用phpcms制作的页面列表中如何实现向下滑动加载更多的效果.首先在phpcms更目录api文件夹中,新建一个名为zdload.php的空白文件这里以调用文章模型列表为例,在文件中加入如下代码作为服务端:defined('IN_PHPCMS') or exit('No permission resources.');$db = '';$db = pc_base::load_mode...

weixin_39600366的博客 303

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

屏幕到达页面底部刷新页面——vue

e为默认属性值,其中,e.target.scrollHeight为页面的整体高度,e.target.clientHeight为当前屏幕的高度,e.target.scrollTop为屏幕顶部与页面顶部的距离。只有属性和事件给最外层,以上三个属性才能代表以上三个含义,当等式成立的时候,触发刷新事件就可以了。屏幕有一个高度,页面也有一个高度,当我们向下滑动屏幕时,屏幕的顶部与页面的顶部直接便产生了距离。所以屏幕高度+屏幕顶部与页面顶部的距离

zhangnx10000的博客 1144

下滑加载更多js_vue.js怎么实现滑动到底部加载更多数据效果?

vue.js怎么实现滑动到底部加载更多数据效果?下面本篇文章给大家简单介绍一下vue实现滑动到底部加载更多效果。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。本文实例为大家分享了vue实现滑动到底部加载更多的具体代码,供大家参考,具体内容如下思路:如果可视区的高度域dom元素的getBoundingClientRect().bottom高度相同说明已经到了底部,可以实现加载了te...

weixin_39907133的博客 539

js滑动到底部加载更多

//滚动条到页面底部加载更多案例 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度 var scrollHeight = $(document).height(); //当前页面的总高度 var clientHeight = $(this).height(); /

Carlos__z的专栏 2万+

js禁止苹果页面底部滚动_JS 原生JS 判断滚动条滑动到底部(兼容苹果safari)

ListenerScoller () {var pageIndex = 1;var startX, startY;document.addEventListener(‘touchstart‘,function (ev) {startX = ev.touches[0].pageX;startY = ev.touches[0].pageY;}, false);let _this = this;docu...

weixin_35687240的博客 297

Html5滑动事件,用于滑动分页

当滑过的文档高度 + 当前浏览器高度 = 文档的高度 即判断滑到底部,用于Html5分页

Badboy66的博客 1759

判断手机滑动到顶部和顶部的js.

$(function () { $(window).scroll(function () { var documentTop = $(document).scrollTop(); var windowHeight = $(window).height(); var document

kakaxiD的博客 2891
上一篇: windows 杀死进程的三个步骤
下一篇: javascript 时间戳转成时间格式
knife1220
博客等级 码龄15年 33粉丝 176原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值