offsetTop和scrollTop区别

最新推荐文章于 2022-12-24 11:42:36 发布
最新推荐文章于 2022-12-24 11:42:36 发布
阅读量1.4w 收藏 26
点赞数 6
文章标签： a
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34118819/article/details/81668670
版权

offsetTop:当前元素顶端距离父元素顶端距离,鼠标滚轮不会影响其数值.

scrollTop:当前元素顶端距离窗口顶端距离,鼠标滚轮会影响其数值.

如图所示中间是个div,那么div.offsetTop = 此div border外到父元素border内且都不包括border

                                  那么div.scrollTop = 此div border(包括border)到窗体上边界(如果div比较大,使得外部产生滚动条,那么这个距离将会随着滚动条变化)

请不要留恋
关注
  • 6
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
javascript中top、clientTop、scrollTop、offsetTop的讲解
sxzxiaofeng168的博客
08-10 346
javascript中top、clientTop、scrollTop、offsetTop的讲解 scrollHeight: 获取对象的滚动高度。 **scrollLeft:**设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 **scrollTop:**设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 **scrollWidth:**获取对象的滚动宽...
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
05-09
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
offsetTop和scrollTop的差别
weixin_33730836的博客
06-19 204
近期想写个组件，结果被这两个属性搞的有点晕，查了下文档和资料，对这两个属性总结例如以下： 一直以来对offsetLeft，offsetTop，scrollLeft，scrollTop这几个方法非常迷糊，花了一天的时间好好的学习了一下．得出了下面的结果：1.offsetTop     :当前对象到其上级层顶部的距离.不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性. 2....
scrollTop及offsetTop的对比
余光的博客
01-14 6052
scrollTop是指某个可滚动区块向下滚动的距离，offsetTop则是元素的上边框与父元素的上边框的绝对距离。 写这篇博客的时候，我对浏览器和元素的位置关系理解的也不太透彻，有错误的地方请大家指正。 一 offset 特别说明：offsetTop是只读属性。 offsetTop由如下两个单词构成： （1）.offset：具有偏移量的意思。 （2）.top：具有顶部的意思。 此属性的功能确实...
scrollTop和offsetTop区别
weixin_42802725的博客
02-20 1619
当元素内部本身存在滚动条时可以使用scrollTop，此时scrollTop值等于元素内部内容向下滚动值，不带单位。 offsetTop指的是此元素与有定位的父元素的顶部距离，一般为定值。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
10-28
在JavaScript中，`top`、`clientTop`、`scrollTop`和`offsetTop`都是用于处理元素位置和滚动状态的属性，它们各自有着特定的用途和含义。理解这些属性的区别对于进行网页布局和动态效果的实现至关重要。 1. `...
offsetTop， scrollTop
最新发布
07-27
- *3* [JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）](https://blog.csdn.net/m0_46833693/article/details/123186078)[target="_blank" data-report-click={"spm":"1018.2226.3001....
scrollTop、offsetTop、clientTop
weixin_30840253的博客
09-17 131
1.offsetTop： obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置。 2.clientTop: 这个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0。 3.scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (即网页被卷去的高) 如果元素是可以滚动的,可以通...
scrollTop和offsetTop的区别，scrollTopLeft和offsetLeft的区别
weixin_30521649的博客
03-07 117
scrollTop和offsetTop的区别：scrollTop是指某个可滚动区块向下滚动的距离，比如向下滚动了10个像素，那么这个元素的scrollTop属性值就是10，这个属性的值是可读写的，且不需要设置positionoffsetTop则是元素的上边框与父元素的上边框的绝对距离。 scrollLeft：设置或获取对象最左端和对象内容的最左端之间的距离，这个属性的值是可读写的off...
JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）
热门推荐
小菜吉的博客
02-28 2万+
这里是javascript中制作滚动代码的常用属性 页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; window.innerHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高..
offsetTop、clientTop、scrollTop等属性详解【概念+详细例子分析】
hannah2233的博客
12-24 6530
1、 offsetTop、offsetLeft2、 offsetWidth、offsetHeight3、 offsetX、offsetY1、 clientWidth、clientHeight2、 clientTop、clientLeft3、 clientX、clientY1、 scrollWidth、scrollHeight2、 scrollTop、scrollLeft
Top, clientTop, offsetTop,scrollTop的区别
05-24 731
页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth   (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWi
js中scrolltop,offsettop,clienttop 区别
weixin_30596165的博客
08-07 290
1.属性定义 scroll:滚动对象 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offset：相对于版面或上层控件的位置 offsetHeig...
top scrollTop offsetTop等对比
beiyuxinke的博客
04-05 242
http://www.cnblogs.com/trlanfeng/archive/2012/11/04/2753280.html
scrollTop、offsetHeight和offsetTop等属性用法详解以及兼容性的解决
冰雪为融的博客
03-09 8730
下面有每个属性详细的解释网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidt...
offsetTop 和 scrollTop 完成楼层导航
qq_45178972的博客
03-21 179
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值