js 基础web API ③ 滚动事件和加载事件

最新推荐文章于 2024-06-04 14:53:18 发布
原创 最新推荐文章于 2024-06-04 14:53:18 发布 · 392 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css #html5

本文探讨了JavaScript中重要的Web API——滚动事件和加载事件。首先解释了学习这些事件的重要性，接着详细介绍了offset家族和client家族的相关属性，如offsetWidth，帮助开发者更好地掌握页面元素的位置和尺寸计算。

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

1.1 滚动事件
当页面进行滚动时触发的事件
为什么要学？
 很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
 事件名：scroll
 监听整个页面滚动：
window.addEventListenner('scroll',function(){})

1.2 加载事件
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

 为什么要学？

 有些时候需要等页面资源全部处理完了做一些事情
 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
 事件名：load
 监听页面所有资源加载完毕：
 给 window 添加 load 事件
window.addEventListenner('load',function(){})

二、元素大小和位置

offset家族

 

获取宽高：
 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
 offsetWidth和offsetHeight
 获取位置：
获取元素距离自己定位父级元素的左、上距离
offsetLeft和offsetTop 注意是只读属性

client家族容

offsetW

获取宽高：
获取元素的可见部分宽高（不包含边框，滚动条等）
 clientWidth和clientHeight
 获取位置：
 获取左边框和上边框宽度
 clientLeft和clientTop 注意是只读属性

client家族
会在窗口尺寸改变的时候触发事件： resize

idth 

window.addEventListenner('resize',fuction(){})

前端领域Web API：处理鼠标滚轮事件的高效方式
小白菜的博客
06-01 711
本文聚焦前端开发中最常用的鼠标滚轮事件（wheel事件），覆盖从基础原理（如WheelEvent对象的秘密）到高级优化（如防抖节流、被动监听器）的全流程。无论是新手前端还是经验丰富的开发者，都能找到解决实际问题的方法。本文将按照“原理→问题→解决方案→实战”的逻辑展开：先拆解WheelEvent的核心属性，再分析直接监听的性能陷阱，接着用“防抖/节流”“被动监听器”等工具解决问题，最后通过“图片平滑缩放”案例验证方法。WheelEvent：记录滚动方向（deltaY）、距离单位（deltaMode。
JS滚动列表加载
12-01
参数说明 listLoadingMore({id:"",id2:function(){},action:function(){},pageNum:10,getNew:undefined,funcArg:undefined,func:function(){},loadingMustTime:0,loadingDom:function(){},loadedDom:function(){},nullDataFunc:function(){},endFunc:function(){},errorFunc:function(){}}); id：滚动条id，不可以是body； id2：滚动列表的id，通过function自行根据情况返回； action：数据来源的ajax地址，插件会自动加上page和length(分别表示请求页数和当前已有记录数)，返回格式统一是[{},{}...]，此类jsonArray； ajaxType：ajax提交方式，将更改传递数据的方式，默认post； pageNum：每页加载数量，将会根据这个数量判断是否全部加载完成； getNew：自定义获取数据方法； funcArg：自定义获取数据时传递的参数，类型为函数，返回所需参数； childrenTag：列表子项的标签，默认LI； func：非自定义获取数据时，创建每行数据的方法； loadingMustTime：强制最小加载时间，默认0； loadingDom：加载中动画自定义，返回Dom或者HTML代码； loadedDom：完全加载完成动画自定义，返回Dom或者HTML代码； nullDataFunc：数据列表为空时执行的方法； endFunc：每页数据加载完成时执行的方法； errorFunc：ajax获取数据失败时调用的方法。 回调方法 调用本方法初始化后将会得到一个专属的方法集： Object {getNew:function,isFull:function,isRunning:function,isStop:function,loading:function,show:function}; getNew()：忽略判断条件，强制执行加载操作。此时数据传递中,page值可能出错，但length值一定正确，请谨慎判断后在执行该方法； isFull(boolean)：修改列表加载完成标志。true为全部加载完成，false则相反； isRunning(boolean)：修改列表当前是否正在加载中标志。几乎没有使用的机会； isStop(boolean)：设置是否停止加载，设置为true时将会阻止未来的所有加载操作； loading()：根据当前滚动条的位置，自动判断是否需要加载新数据； show(boolean,boolean)：强制设置加载中和加载完成dom的显示或隐藏，true表示显示，false相对。
JS滚动加载
农码精神
03-24 149
JS滚动加载 var one = true;//设置一个全局变量 $(window).scroll(function () { var hight = document.body.scrollHeight - document.body.scrollTop - window.screen.height;//页面往下滚动的时候，定义最...
js /滚动事件
qq_73700909的博客
11-18 1177
导语：在淘宝官网中，我们会发现，页面的中返回顶部按钮不是一直存在的，而是当页面滚动到某个高度的时候才会出现，那么想要实现这样的效果，就需要使用js中的滚动事件**方法一：**window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标。y-coord 是文档中的纵轴坐标。比如： window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标。y-coord 是文档中的纵轴坐标。**方法二：**
js滚动事件
weixin_55107526的博客
04-02 1278
js滚动滑轮 var slide = { index:1, scrollB:true, scroll:function(e){ var e = e || window.event; if(!slide.scrollB) return; slide.scrollB = false; //设置滚动高度 屏的高度 var top = [0,-834,-1654,-2433,-3251,-3550]; var box = document.getElementById("slide");//找到滚动元素
JavaScript滚动事件
爱蹦跶的全栈大A阿
02-10 2192
滚动是网页交互不可或缺的一部分。监听页面和元素的滚动事件,可以帮助我们实现许多实用的功能。本文将详细介绍页面与元素的滚动事件,如何跟踪滚动距离,以及判断滚动到底部的方法。通过学习,相信大家可以轻松处理各种滚动需求,丰富页面交互体验。​滚动事件为我们提供了实时访问滚动状态的能力。合理使用可以避免过度重复渲染,优化性能。本文不仅介绍了滚动事件的监听方法,还展示了防抖处理和监听内容变化的技巧。希望通过这个博客,大家已可以轻松应对各种滚动事件处理需求。如果还有疑问,欢迎评论区讨论。​。
【Web API DOM08】事件汇总（加载事件、滚动事件）
最新发布
大前端开发工程师、互联网方向创业者
06-04 389
页面加载事件、元素滚动事件、页面尺寸事件知识点整理
JS实现判断滚动条滚到页面底部并执行事件的方法
10-25
JS实现判断滚动条滚到页面底部并执行事件的方法主要涉及到Web前端开发中处理滚动条相关事件的技术。为了准确地判断滚动条是否已经滚到页面底部，我们需要理解几个关键的DOM属性：clientHeight、offsetHeight和...
滚动到“加载数据”，“ Web服务”，“ JavaScript”
04-05
总结来说，滚动加载结合JavaScript和Web服务是现代网页开发中的重要技术，它可以提升用户体验，降低服务器负担，尤其是在处理大量数据时。通过理解和应用这些技术，开发者能够构建更加高效、响应式的Web应用程序。
2023年web前端开发之JavaScript webAPI(三).rar
03-18
本资源"2023年web前端开发之JavaScript WebAPI(三).rar"似乎包含了两个案例项目：电梯导航素材和m-bilibili，这些都是基于JavaScript Web API实现的应用。 1. **JavaScript Web API基础** JavaScript Web API是一...
js 滚动加载
Raywh的博客
04-17 523
方式：页面或div的滚动条滚动到底部或者特定位置后，自动加载更多内容。场景：图片等list样式的内容，需要在不翻页的情况下使用加载更多。
js滚动加载
YikL_的博客
11-02 278
初始化给盒子添加滚动事件 componentDidMount () { let picDiv = document.getElementById('picList') this.addEnlist(picDiv, 'mousewheel', this.scrollFun.bind(this, picDiv)) this.addEnlist(picDiv, 'DOMMouseScroll', this.scrollFun.bind(this, picDiv)) } 判
js基础——滚动事件
jwz934738949的博客
09-13 472
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标滚动事件</title> <style> #box1 { width: 150px; ...
js的滚轮事件
个人笔记
03-26 4020
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script type="text/javascript"> //滚轮事属于鼠标事件 只是滚轮兼容性不一样 //滚轮事件直接加给文档 document
HTML——JS—滚动事件
piduocheng0577的博客
03-18 974
案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{ height: 2000px; background: linear-gradient(red, ...
js中的滚轮事件
qq_44604924的博客
08-22 305
描述：实现 鼠标滚动时（向下），div变高，向上，变短 onmousewheel 鼠标滚轮事件，但火狐中不支持 火狐中使用DOMMouseScroll来绑定滚动事件 该事件通过addEventListener()函数来绑定 event.wheelDelta来获取鼠标滚轮滚动的方向,向上滚是120,乡下滚是-120，火狐中不支持 火狐中使用event.detail,向上滚是-3，向下滚是+3 js代码： window.onload = function(){ var box13 = document.
JS 滚动条事件
weixin_30699741的博客
10-31 153
当滚动条滚动到最底部出发事件： 1 $(window).scroll(function(){ 2 if($(document).height()-$(this).scrollTop()-$(this).height()==0){ 3 getdata(); 4 } 5 }); ...
iscroll触屏滚动加载解决方案：代码和演示
这些demo通常会展示滚动效果、加载动画、横向滚动和纵向滚动等，使得开发者可以直观地感受到使用iscroll后的页面表现。 在标签中，我们看到了“iscroll 触屏加载 触屏滚动”这几个关键词。触屏加载可能指的是通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值