微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

js中的scroll和offset 使用比较的实例与分析_javascript技巧

php中文网
发布： 2016-05-16 17:21:06
原创
1135人浏览过

1.offsetTop     :
当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

2.offsetLeft    :
当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetWidth   :
当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetHeight :
与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

5.offsetParent  :
当前对象的上级层对象.
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.
利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置．

6.scrollLeft    :
对象的最左边到对象在当前窗口显示的范围内的左边的距离．
即是在出现了横向滚动条的情况下，滚动条拉动的距离．

7.scrollTop
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．
即是在出现了纵向滚动条的情况下，滚动条拉动的距离．

课游记AI
课游记AI

AI原生学习产品

课游记AI 70
查看详情 课游记AI

 

【代码】测试offsetTop和scrollTop的html代码

复制代码 代码如下:







   

   

       

           

               
this is test!

           

           
       

       

           

               
this is test!

           

           
       

       

           

               
this is test!

           

           
       

   

   

       
    click1结果：
               

  •            

  •            

  •            

  •        

       
    click2结果：
               

  •            

  •            

  •            

  •        

       
    click3结果：
               

  •            

  •            

  •            

  •        

   

   




上面就是自己测试用的代码，可以直接拿来测试。
相关标签：
js

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：jQuery 借助插件Lavalamp实现导航条动态美化效果_jquery 下一篇：jquery $.each 和for怎么跳出循环终止本次循环_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
Node.js应用在Railway平台连接MySQL数据库的排查与解决 在Railway等云平台部署Node.js应用时，连接MySQL数据库常遇到ETIMEDOUT和ENOTFOUND等错误。本教程将深入分析这些错误，并提供一套完整的解决方案，包括从传统回调式连接到基于Promise的连接池迁移、利用环境变量管理凭证，以及在Express路由中采用async/await模式处理数据库操作，确保应用稳定高效地连接到MySQL服务。
2025-11-23 23:54:32
605
实现动态加载与跳转的垂直信息流教程 本文深入探讨了如何构建一个高性能的垂直信息流或时间线，该组件能够动态加载数据以应对海量内容，并在用户滚动到列表末尾时自动获取新项目。此外，文章还详细介绍了实现跳转到特定位置（如历史记录中的某个日期）的功能，确保在不加载全部数据的情况下，高效地显示目标位置及其周围的内容。通过一个无第三方库依赖的JavaScriptFeedEngine实现，提供了一个简洁而强大的解决方案。
2025-11-23 23:54:06
110
JavaScript数据库操作_MongoDB连接与查询 首先安装MongoDB驱动并连接数据库，然后通过insertOne插入数据，使用find进行条件查询和字段投影，再用updateOne更新数据，最后通过deleteOne删除文档，完成基本增删改查操作。
2025-11-23 23:52:02
190
类型安全JavaScript_TypeScript进阶实践 TypeScript通过静态类型系统提升代码可维护性，进阶实践需掌握条件类型、映射类型增强等高级特性以实现精细类型控制。
2025-11-23 23:51:31
943
JavaScript设计模式_策略模式实战 策略模式通过封装算法并使其可互换，实现算法与客户端解耦。以表单验证为例，定义包含isNonEmpty、minLength、isMobile等校验规则的策略对象，Validator类通过add方法注册规则并缓存执行函数，validate遍历调用返回首个错误信息，从而分离校验逻辑与业务代码，提升可维护性与复用性。
2025-11-23 23:50:02
272
JavaScript桥接模式_抽象与实现分离 桥接模式通过将抽象与实现分离，使两者独立变化，避免类爆炸问题。例如在绘制不同颜色形状时，形状和颜色可分别扩展，通过组合关联（如圆形持有渲染器引用）实现灵活搭配，支持运行时切换行为，适用于跨平台、多主题等场景。
2025-11-23 23:49:02
375
JavaScript数据库_ORM关联查询性能调优 答案：ORM性能调优需避免N+1查询，采用预加载如Sequelize的include、TypeORM的leftJoinAndSelect；确保外键和复合查询字段建立索引；精确控制返回字段与分页，减少数据传输；复杂场景结合原生查询与批量操作，提升执行效率。
2025-11-23 23:47:33
419
JavaScript高级编程_深入理解现代JavaScript开发 现代JavaScript核心包括块级作用域、闭包、原型继承、异步编程与模块化。使用let/const避免变量提升，闭包实现私有变量但需防内存泄漏；class为语法糖，继承基于原型链；Promise与async/await解决回调地狱，提升异步代码可读性；ES6模块配合import/export与打包工具实现高效模块化开发，掌握细节如this绑定与事件循环是构建健壮应用的关键。
2025-11-23 23:47:02
455
JavaScript打包优化_TreeShaking与代码分割 TreeShaking通过静态分析移除未使用的导出代码，需使用ES6模块语法并声明无副作用；代码分割则利用动态导入和SplitChunks将代码拆分为按需加载的chunk，提升首屏性能。两者结合可显著减小包体积并优化加载时机，使应用更轻更快。
2025-11-23 23:45:06
483
JavaScript内存分析_堆快照诊断方法 堆快照是诊断JavaScript内存问题的核心工具，通过ChromeDevTools可捕获某一时刻内存中对象的分布情况，帮助定位内存泄漏。它记录了所有可达对象的类型、大小及引用关系，重点关注ConstructorView、ShallowSize、RetainedSize和Dominators等指标，能发现闭包、全局变量、未解绑事件等常见泄漏模式。建议在操作前后多次拍摄快照，使用Comparison视图对比分析对象增减，结合引用链追踪确认泄漏源头，从而有效解决页面卡顿或崩溃问题。
2025-11-23 23:44:02
738
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部