Js滚动到低触发事件

已于 2022-05-19 15:21:26 修改
阅读量1.6k 收藏 1
点赞数 1
文章标签： javascript 开发语言 ecmascript
于 2022-05-19 15:21:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq3305559894/article/details/124851235
版权
本文介绍了如何使用JavaScript检测页面滚动到底部的事件。通过分析`scrollHeight`、`clientHeight`和`scrollTop`的关系，当滚动高度等于客户端高度加上滚动顶部时，表明垂直滚动条已滚动到底。同样，通过`scrollWidth`和`scrollLeft`可以判断水平滚动。内容适合JavaScript初学者，欢迎大家交流讨论。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天我要分享的Js滚动到低触发事件的知识点

Body标签里放置h4标签作为标题，p标签里放置一篇文字，h4标签里放置一个input标签和label标签再来一个input标签，以下就是页面的内容，如下图所示；

 

接下来就是Css样式，如下图所示；

 

最后就是JS代码声明变量article，当article滚动到一定高度触发条件，

整个滚动区域的高度

clientHeight 滚动区域的可见高度

滚动条距离顶部的距离

 

满足条件：滚动高度==客户端高度+滚动顶部 说明垂直滚动条滚动到底了

JS全部代码放置在下面，如下图所示；

 

小结：

当满足scrollHeight== clientHeight + scrollTop

 满足：滚动高度 == 客户端高度 + 滚动顶部

 说明垂直滚动条滚动到底了

当满足scrollWidth==clientWidth+scrollLeft

 满足：滚动宽度 == 客户端宽度 + 向左滚动

 说明水平滚动条滚动到底了

这是我所学到的Js滚动到低触发事件步骤，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！

JavaScript滚动到底部触发事件
TechNovaX的博客
09-14 863
JavaScript滚动到底部触发事件在开发网页应用程序时，经常会遇到需要在用户滚动到页面底部时触发某种事件的需求。这种需求在实现无限滚动、自动加载更多内容或显示底部工具栏等场景中非常常见。在本篇文章中，我们将学习如何使用JavaScript来检测用户是否滚动到页面底部，并触发相应的事件。
Javascript实现当页面滚动到底部时触发加载事件
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-31 495
Javascript实现当页面滚动到底部时触发加载事件
js基础:实现页面打开后滚动到最底端的效果
溺水的鱼 - Later equals never.
01-07 567
滚动页面的方法有scroll、scrollBy和scrollTo，三个方法都带两个参数：x(X轴上的偏移量)和y(Y轴上的偏移量)。因为是要滚动 到页面底部，所以参数x为0，y为页面的滚动高度。另外，页面的滚动高度必须在网页加载完成后才能获取到，所以触发事件用onload。 　　具体步骤： 　　方法一：用scroll方法实现。 <bodyonload="scroll(0,docum...
js在页面滚动到一定位置时触发事件？
weixin_34049032的博客
06-12 623
function getTop(e) { var offset=e.offsetTop; if(e.offsetParent!=null) //只要还有父元素,也就是当前元素不是根节点就继续往上累计元素的高度 offset+=getTop(e.offsetParent); return offset; } var myBlockTop = ...
JS实现滚动触底实现（附：PC端滚动分页加载数据）
qq_44741577的博客
02-01 3000
实时去获取位置信息稍微会损耗性能，我们应该把不变的缓存起来，只实时获取可变的部分。往下的区域是符合条件的，会导致一直触发，这不是我们想要的。例子我会使用vue来实现，和原生实现是一样的。如果你做过小程序，这和。声明一个离底部的距离变量。时成功触发事件，但由于。
js判断iframe内的网页是否滚动到底部触发事件
10-23
要实现判断iframe中的网页是否滚动到底部并触发事件的功能，我们需要理解几个关键的JavaScript属性和事件监听机制。以下知识点详细解释了如何使用JavaScript来检测iframe的滚动状态，并在到达底部时触发相应的事件。...
判断滚动条滑到底部触发事件(实例讲解)
08-28
总结起来，判断滚动条滑到底部触发事件的关键在于比较页面、视口和滚动的高度差。通过监听滚动事件，我们可以精确地知道何时触发加载更多数据或其他操作。这种技术在大数据量的列表或流式内容展示中非常常见，可以...
JS实现判断滚动条滚到页面底部并执行事件的方法
10-25
JS实现判断滚动条滚到页面底部并执行事件的方法主要涉及到Web前端开发中处理滚动条相关事件的技术。为了准确地判断滚动条是否已经滚到页面底部，我们需要理解几个关键的DOM属性：clientHeight、offsetHeight和...
滚动条滚到底部触发事件
weixin_44588946的博客
04-29 1967
滚动条滚到底部触发事件 这里的是滚动条滚到底部触发事件，而不是滚动条在底部再滚动触发事件 Jquery代码： $('.scroll').scroll(function (e) { if (isScrollBottom(this)) { // 滚动到底端了 加载内容 //加载数据 appendloading("related"); } else { // 没有滚动到底端 其他处理...
js 滚动条滚动到底部触发事件
weixin_43445771的博客
11-11 2858
一、前言 　　在开发项目时，常常需要展示大量数据。如果全部显示出来，数据相对少时，看不出来什么不同，如果数据很多时，一次请求全部显示，这就相当可怕了。 面对这种问题，PC里使用了分页效果，将数据分成一页页，换页时请求当前页数据， 而屏幕较小的移动端，分页就不怎么好看了，常用的方法是滚动到底部时继续加载数据 滚动加载其实也是一种分页，只是不使用页码而已。 二、正文 （一）、滚动事件的效果和原理 效果： 滚动到当前页的底部时，会转圈圈缓冲加载下一页的数据，完成后滚动区域和内容增加，以此类推； 原理： 3个数据（
利用jquery制作滚动到指定位置触发动画
10-22
本文只是一个简单的演示程序，大家可以根据自己的需求进行修改，以达到自己想要实现的功能。
js滚动条触碰底部触发的事件
zyf13671493506的博客
09-27 794
var minAwayBtm = 100; // 距离页面底部的最小距离 window.addEventListener("scroll",function(e){ var awayBtm = $(document).height() - $(window).scrollTop() - $(window).height(); if (awayBtm <= minAway...
JS 滚动条滚动到指定元素触发
weixin_34050519的博客
10-20 291
JS 版 <!DOCTYPE html> <html> <head> <style type="text/css"> #showIt { width: 200px; height: 200px; background-color: ...
Javascript：页面滚动事件-滚动到指定的坐标
最新发布
听海边涛声
06-23 321
Javascript：页面滚动事件-滚动到指定的坐标
原生js 滚动到底部的时候触发的事件
weixin_53035812的博客
08-10 1275
本文为搬运学习,感谢原文大佬，原文地址:https://blog.youkuaiyun.com/qq_34507902/article/details/102545270 代码入下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&.
浏览器滚动到底部触发事件
weixin_39573946的博客
07-12 446
浏览器滚动到底部触发事件+防抖 window.onscroll = d(); function d (){ var timeout = null return function (){ if(!timeout){ timeout = setTimeout(fn,1000) }else{ clearInterval(timeout) timeout = setTimeout(fn,1000)
html查看完成协议才可可注册
qq_45627570的博客
09-23 372
<style type="text/css"> #info{ width: 300px; height: 500px; background-color: #bfa; overflow: auto; } </style> <script type="text/javascript"> window.onloa...
JS_监听页面滚动时触发
小歪博客
09-10 249
window.onscroll = function(e){ console.log(e); }
滚动条滚动到底部触发事件
dht91597的博客
11-26 693
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值