offsetTop

最新推荐文章于 2024-08-17 10:56:45 发布
最新推荐文章于 2024-08-17 10:56:45 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/extendworld/article/details/81975190
版权

定位参照点

offsetTop 的定位是相对于 offsetParent 元素的

offsetParent的定义：与当前元素最近的经过定位(position不等于static)的父级元素

类似于绝对定位的参照点。

三种情况：

  • position为fixed时，offsetParent为null，offsettop的值和top相等。此时元素是以视口来定位的。
  • position非fixed，父级元素无定位（static）时，offsetParent为body
  • position非fixed，父级元素有定位时，offsetParent为最近的有定位的父级元素。

offsetTop， offsetLeft，offsetWidth，offsetHeight

offsetWidth： 元素的宽(不含margin)
offsetHeight： 元素的高(不含margin)
offsetLeft：距离 offsetParent 最左边的距离

scrollTop 和 scrollLeft

元素：内部出现滚动条的元素这两个参数会有值。

scrollHeight：整个元素的高度
scrollTop：向上滚动的高度
scrollLeft：向左滚动的高度
scrollWidth：整个元素的宽度

clientWidth 和 clientHeight

clientWidth：可视区域的宽
clientHeight：可视区域的高

extendworld
关注
专栏目录
offsetLeft、offsetTop全面解析
qq_52475404的博客
10-19 722
offsetLeft、offsetTop全面解析 一、第一个小例子 <body> <style> body { margin:0; } .box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; } .box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hi
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
05-09
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
元素偏移（offset，scroll,client)介绍，动态设置类名，样式
最新发布
qq_48763502的博客
08-17 2217
属性 / 方法描述表示一个元素的顶部边框的宽度，以像素表示。表示一个元素的左边框的宽度，以像素表示。在页面上返回内容的可视高度（高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）在页面上返回内容的可视宽度（宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）返回任何一个元素的高度包括边框（border）和内边距（padding），但不包含外边距（margin）
offsetTop与offset().top
Vivian_shuang的博客
07-22 560
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style type="text/css"> .wrap{ width: 200px; height: 200px; border: 1px solid deepskyblue; background-color: blanchedalmond;
Jquery中用offset（）.top和offsetTop的比较
weixin_34381666的博客
06-22 102
今天，想测试一个div与顶部的距离，用的是.offsetTop，但是offsetTop获得的值，怎么都打印不出来。折腾了半天，打印的结果都是undefined，虽然网上很多资料都说返回的是数值。虽然这个函数永不了，但是黄显钦找到了一个可以替代offsetTop的函数。那就是jquery的offset().top 我们先来了解一下，什么是offset（）.top和offsetTop？ ...
js中关于scrolltop.offsettop等距离用法的介绍
纸上得来终觉浅，绝知此事要躬行
12-01 6034
页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidt
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
10-28
在JavaScript中，`top`、`clientTop`、`scrollTop`和`offsetTop`都是用于处理元素位置和滚动状态的属性，它们各自有着特定的用途和含义。理解这些属性的区别对于进行网页布局和动态效果的实现至关重要。 1. `...
Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页
10-30
Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性 在Javascript拖拽系列文章中，offsetLeft、offsetTop、offsetWidth、offsetHeight四个属性都是非常重要的，它们都是关于位置定位...
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
01-19
clientHeight，只读 clientHeight可以用公式 CSS height + CSS padding – 水平滚动条的高度 (如果存在) 来计算。 如图，这样一个div，它的clientHeight为95，计算：50(height)+30(padding-top)+30(padding-bottom)...
js中的各种“位置”——“top、clientTop、scrollTop、offsetTop……”，你知道多少...
weixin_30256901的博客
09-15 612
当要做一些与位置相关的插件或效果的时候，像top、clientTop、scrollTop、offsetTop、scrollHeight、clientHeight、offsetParent。。。看到这么多单词，而且长得那么像，是不是懵X了！ 第一次看到这图，说实话有点被吓到。。。 ============================分割线=========================...
关于offsetTop的理解
jinxi1112的博客
05-30 3万+
1. offsetTop：元素到offsetParent顶部的距离 2. offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：获取child的offsetTop，图1的offsetParent为father，图2的offsetParent为body。 3. 注意...
offsettop及相关属性介绍
qq_42345237的博客
01-03 1331
offsettop及相关属性介绍 最近的项目中有用到offsetTop属性配合iscroll插件来进行下拉加载的一个效果，经过测试，在其他浏览器都是OK的，但是在iPhone的safari上页面刚加载完以后，滚动部分会有被遮挡一部分，后来发现是因为获取到的offsetTop值在刚开始进来的时候，并不是0，而是120px，这个刚好是节点元素到页面顶部的距离，所以猜测这里应该是offsetparent...
offsetTop，offset().top
GUYyyy的博客
10-30 1004
原文：here offsetTop与offset().top相同点： 1.当无滚动条且offsetTop与offset().top参照对象相同时，它们获取的值相同。 offsetTop与offset().top不同点： 1.offset().top与offsetTop偏移量参照对象不同，offset().top始终是文档，而offsetTop参照的对象是可变的。 2.offsetTop获取的偏移量不随滚动条滚动变化，但offset().top随着滚动条变化（注意滚动监听的是一个有滚动条的元素，而不是wind
html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
热门推荐
12-10 13万+
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度  offs
各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight...
weixin_30525825的博客
08-26 435
1、.position()和.offset() jquery的.position()获取相对于最近的position为relative或absolute的父元素的偏移，返回.position().left和.position().top，不算上自己的margin-left； jquery的.offset()获取相对于视口左上角的偏移，返回.offset().left和.offset().top...
offsetTop和offset().top
u013742084的专栏
06-01 7633
前段时间写了一个视觉差滚动的demo，是用js实现的。 第二次看这个例子，我想封装一个jquery插件。 首先demo中有两个button需要在jq中对它们进行定位，然而问题来了 我先得到第一张图片的位置，对图片中的button的top进行定位时，想法是将css样式中的top设置成this.img.offset().top + this.img.height() / 2 - this
vue offsettop
05-31
在 Vue 中获取元素的 offsetTop 可以使用以下方法： 1. 使用 ref 获取元素，然后通过 $refs 对象获取元素的 offsetTop 属性，例如： ```html <div ref="myDiv">Hello World export default { mounted...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值